在ReactJS中使用按钮过滤数据

import React, { useState } from 'react';

const data = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Orange' },
  { id: 4, name: 'Mango' },
];

const App = () => {
  const [filter, setFilter] = useState('all'); // 初始过滤条件为'all'

  const handleFilter = (filterValue) => {
    setFilter(filterValue);
  };

  const filteredData = data.filter((item) => {
    if (filter === 'all') {
      return true; // 显示所有数据
    } else {
      return item.name.toLowerCase() === filter.toLowerCase(); // 根据过滤条件筛选数据
    }
  });

  return (
    <div>
      <button onClick={() => handleFilter('all')}>All</button>
      <button onClick={() => handleFilter('apple')}>Apple</button>
      <button onClick={() => handleFilter('banana')}>Banana</button>
      <button onClick={() => handleFilter('orange')}>Orange</button>
      <button onClick={() => handleFilter('mango')}>Mango</button>

      <ul>
        {filteredData.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;