如何在react中过滤和显示数组

import React, { Component } from 'react';

class FilteredList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: ['apple', 'banana', 'cherry', 'date'],
      filter: ''
    };
  }

  handleFilterChange = (event) => {
    this.setState({ filter: event.target.value });
  }

  render() {
    const { data, filter } = this.state;
    const filteredData = data.filter(item => item.includes(filter));

    return (
      <div>
        <input type="text" value={filter} onChange={this.handleFilterChange} placeholder="Filter" />
        <ul>
          {filteredData.map(item => <li key={item}>{item}</li>)}
        </ul>
      </div>
    );
  }
}

export default FilteredList;