如何使用React创建resposnive搜索过滤器

npx create-react-app search-filter

import React, { useState } from 'react';

const Filter = ({ data }) => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
  };

  const filteredData = data.filter((item) =>
    item.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <input type="text" value={searchTerm} onChange={handleSearch} />
      <ul>
        {filteredData.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default Filter;

import React from 'react';
import Filter from './Filter';

const App = () => {
  const data = ['Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry'];

  return (
    <div>
      <h1>Search Filter Example</h1>
      <Filter data={data} />
    </div>
  );
};

export default App;

npm start