使用react在存储文件中创建筛选器

import React, { useState } from 'react';

const Filter = () => {
  const [filterValue, setFilterValue] = useState('');

  const handleFilterChange = (event) => {
    setFilterValue(event.target.value);
  };

  const storageFiles = [
    { name: 'file1.txt', type: 'text' },
    { name: 'file2.jpg', type: 'image' },
    { name: 'file3.mp3', type: 'audio' },
    // ...
  ];

  const filteredFiles = storageFiles.filter((file) =>
    file.name.includes(filterValue)
  );

  return (
    <div>
      <input
        type="text"
        value={filterValue}
        onChange={handleFilterChange}
        placeholder="Enter filter value"
      />
      <ul>
        {filteredFiles.map((file) => (
          <li key={file.name}>{file.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Filter;