如何基于多条件react钩子进行过滤

import React, { useState } from 'react';

const FilterComponent = () => {
  const [filter, setFilter] = useState({
    condition1: '',
    condition2: '',
    condition3: '',
  });

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFilter((prevFilter) => ({
      ...prevFilter,
      [name]: value,
    }));
  };

  // 根据过滤条件筛选数据或元素的函数
  const filterData = (data) => {
    // 根据filter对象的属性值进行筛选
    // 这里可以根据具体的业务逻辑进行筛选操作
    // 返回符合条件的数据或元素
  };

  return (
    <div>
      <input
        type="text"
        name="condition1"
        value={filter.condition1}
        onChange={handleInputChange}
      />
      <input
        type="text"
        name="condition2"
        value={filter.condition2}
        onChange={handleInputChange}
      />
      <input
        type="text"
        name="condition3"
        value={filter.condition3}
        onChange={handleInputChange}
      />
      {/* 根据过滤条件渲染符合条件的数据或元素 */}
      {filterData(data).map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default FilterComponent;