Блог

Ниже приведен код браузера поиска, в котором пользователи могут искать футболиста по имени и по другим атрибутам. Я использовал крючки react для фильтра поиска. Но я не могу найти способ добавить более одного поискового фильтра (я хочу выполнить поиск по имени, национальности и названию клуба игрока). Я не могу вернуть несколько фильтров поиска, используя следующий код:

 import React, {useState} from 'react'; import "./SearchBar.css"; import { RiSearch2Line } from 'react-icons/ri'; import { RiCloseLine } from 'react-icons/ri';  function SearchBar({placeholder, data}) {   const [filteredPlayerData, setFilteredData] = useState([]);  const [wordEntered, setWordEntered] = useState("");   const handleFilter = (event) =gt; {  const searchWord = event.target.value;  setWordEntered(searchWord);   const nameFilter = data.filter((value) =gt; {  const Name = value.name.toLowerCase();  return Name.includes(searchWord.toLowerCase());  });   if (searchWord === "") {  setFilteredData([]);   } else{  setFilteredData(nameFilter);  }  };   const clearInput = () =gt; {  setFilteredData([]);  setWordEntered("");  };    return (  lt;div className="search"gt;  lt;div className="searchinput"gt;  lt;input type="text" placeholder={placeholder} value={wordEntered} onChange={handleFilter}/gt;  lt;div className="searchIcon"gt; {filteredPlayerData.length === 0 ? (  lt;RiSearch2Line className="searchicon"/gt;  ) : (  lt;RiCloseLine id="clearBtn" onClick={clearInput} /gt;  )} lt;/divgt;  lt;/divgt;  { filteredPlayerData.length !== 0 amp;amp; (  lt;div className="dataresult"gt;  {filteredPlayerData.map((value,key) =gt; {  return lt;button className="dataItem" gt;{value.name}, {value.club}lt;/buttongt;  })  }  lt;/divgt; )}  lt;/divgt;  ); }  export default SearchBar  

Здесь я отфильтровал только имя игрока. Логика фильтра поиска такова :

 if (searchWord === "") {  setFilteredData([]);   } else{  setFilteredData(nameFilter);  }  

Может ли кто-нибудь помочь мне с этой проблемой?