使用React向具有表的折叠面板添加搜索筛选器

import React, { useState } from 'react';

const CollapsiblePanel = () => {
  const [searchKeyword, setSearchKeyword] = useState('');
  const tableData = [
    { name: 'John', age: 25 },
    { name: 'Jane', age: 30 },
    { name: 'Bob', age: 35 },
  ];

  const handleSearchChange = (event) => {
    setSearchKeyword(event.target.value);
  };

  const filteredData = tableData.filter((item) =>
    item.name.toLowerCase().includes(searchKeyword.toLowerCase())
  );

  return (
    <div>
      <input type="text" value={searchKeyword} onChange={handleSearchChange} placeholder="Search" />
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {filteredData.map((item, index) => (
            <tr key={index}>
              <td>{item.name}</td>
              <td>{item.age}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default CollapsiblePanel;