如何在React中过滤对象数组

import React, { useState } from 'react';

const FilterComponent = () => {
  const [data, setData] = useState([
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 30 },
    { id: 3, name: 'Bob', age: 35 },
  ]);

  return (
    // 组件的JSX代码
  );
};

export default FilterComponent;

return (
  <div>
    <input type="text" onChange={(e) => handleFilter(e.target.value)} />
    {/* 其他组件内容 */}
  </div>
);

const handleFilter = (filterValue) => {
  const filteredData = data.filter((item) =>
    item.name.toLowerCase().includes(filterValue.toLowerCase())
  );
  setData(filteredData);
};

return (
  <div>
    <input type="text" onChange={(e) => handleFilter(e.target.value)} />
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  </div>
);