React ile arama sonuçlarını filtreleme, state kullanarak ve verileri filtreleme işlemini uygulayan bir bileşen oluşturarak yapılabilir. Aşağıdaki adımlar bu süreci açıklamaktadır:
State tanımlama: Arama sonuçlarını tutan bir state tanımlayın. Ayrıca, arama metin kutusundaki değeri tutan bir state tanımlayın.
const [searchResults, setSearchResults] = useState([]);
const [searchTerm, setSearchTerm] = useState(”);
Arama metin kutusu oluşturma: Arama metin kutusu oluşturun ve değerini state’e bağlayın.
<input
type=”text”
value={searchTerm}
onChange={(event) => setSearchTerm(event.target.value)}
/>
Verileri filtreleme: Arama metin kutusundaki değer değiştiğinde, verileri filtreleyin ve sonuçları setSearchResults fonksiyonu ile state’e atayın.
useEffect(() => {
const filteredResults = data.filter((item) =>
item.name.toLowerCase().includes(searchTerm.toLowerCase())
);
setSearchResults(filteredResults);
}, [searchTerm, data]);
Sonuçları görüntüleme: Arama sonuçlarını görüntülemek için, searchResults state’ini map fonksiyonu ile döngün ve her bir sonucu bir bileşen olarak render edin.
{searchResults.map((result) => (
<div key={result.id}>{result.name}</div>
))}
Bu şekilde, React ile arama sonuçlarını filtreleme işlemi gerçekleştirilmiş olur.