How to search in a list in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Implementing search functionality is essential for React applications that display lists of data, improving user experience by helping users find items quickly. As the creator of CoreUI with over 11 years of React development experience since 2014, I’ve built search features in countless data tables and lists. The most effective solution is to use controlled input for the search query and filter the data array based on the search term. This approach is simple, performant, and provides instant search results as users type.
Use controlled input and array filter to implement search in React.
const [searchTerm, setSearchTerm] = useState('')
const data = [
{ id: 1, name: 'John Doe', email: '[email protected]' },
{ id: 2, name: 'Jane Smith', email: '[email protected]' },
{ id: 3, name: 'Bob Johnson', email: '[email protected]' }
]
const filteredData = data.filter(item =>
item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
item.email.toLowerCase().includes(searchTerm.toLowerCase())
)
return (
<div>
<input
type='text'
placeholder='Search...'
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
{filteredData.map(item => (
<div key={item.id}>
<h3>{item.name}</h3>
<p>{item.email}</p>
</div>
))}
{filteredData.length === 0 && (
<p>No results found for "{searchTerm}"</p>
)}
</div>
)
The search term is stored in state and controlled by the input field. The filter() method creates a new array containing only items that match the search term. Converting both the search term and item properties to lowercase ensures case-insensitive matching. The includes() method checks if the search term appears anywhere in the name or email fields. You can extend the search to multiple fields using the OR operator.
Best Practice Note
This is the same search implementation we use in CoreUI React tables for client-side filtering. For large datasets, consider debouncing the search input to avoid filtering on every keystroke. For very large lists, implement server-side search by sending the search term to your API and displaying the filtered results.
