To implement a live search using React, you can create a component that takes user input and filters a list of items based on that input. Here’s a simple example of how you can achieve this using React and state management:
import React, { useState } from 'react'; function LiveSearch() { const [searchQuery, setSearchQuery] = useState(''); const [items, setItems] = useState([ 'Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape', 'Honeydew', 'Kiwi', 'Lemon', ]); const filteredItems = items.filter(item => item.toLowerCase().includes(searchQuery.toLowerCase()) ); const handleInputChange = event => { setSearchQuery(event.target.value); }; return ( <div> <h1>Live Search Example</h1> <input type="text" placeholder="Search..." value={searchQuery} onChange={handleInputChange} /> <ul> {filteredItems.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> </div> ); } export default LiveSearch;
filteredItems
:
const filteredItems = items.filter(item => item.toLowerCase().includes(searchQuery.toLowerCase()) );
- In this code, we are using the JavaScript
Array.prototype.filter()
method to filter theitems
array based on a condition. Here’s how it works step by step:items
is an array that contains a list of items (e.g., fruits).item.toLowerCase().includes(searchQuery.toLowerCase())
is a function that checks whether each item in the array (converted to lowercase) includes thesearchQuery
(also converted to lowercase).
Breaking down the
item.toLowerCase().includes(searchQuery.toLowerCase())
part:item.toLowerCase()
converts the current item to lowercase. This is done to make the search case-insensitive. For example, if you’re searching for “apple,” it should match “Apple” in the list of items.searchQuery.toLowerCase()
converts the search query itself to lowercase for the same reason.item.toLowerCase().includes(searchQuery.toLowerCase())
checks if the lowercase version of the item includes the lowercase version of the search query. If it does, the item will be included in thefilteredItems
array.
So,
filteredItems
will contain only those items from the originalitems
array that match the search query in a case-insensitive manner. handleInputChange
:const handleInputChange = event => { setSearchQuery(event.target.value); };
This is a function that gets called whenever the value of the input field changes. It takes an
event
object as a parameter. Here’s what it does:event.target.value
extracts the current value of the input field when the user types something into it.setSearchQuery(event.target.value)
updates thesearchQuery
state with the new value entered by the user. This change in state triggers a re-render of the component with the updatedsearchQuery
, causing the filtered list of items (filteredItems
) to be recalculated based on the new search query.
Essentially,
handleInputChange
is responsible for keeping thesearchQuery
state in sync with the user’s input, which in turn updates the displayed list of filtered items based on the user’s search query.