How to filter a list in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Implementing filtering functionality allows users to narrow down data based on specific criteria, essential for data-heavy React applications. As the creator of CoreUI with over 11 years of React development experience since 2014, I’ve built advanced filtering systems in countless enterprise dashboards. The most effective solution is to use state to track filter criteria and the array filter method to apply multiple conditions. This approach provides flexible, real-time filtering with support for multiple filter combinations.
Use state and array filter to implement multi-criteria filtering in React.
const [filters, setFilters] = useState({
status: '',
minAge: 0,
searchTerm: ''
})
const data = [
{ id: 1, name: 'John Doe', age: 30, status: 'active' },
{ id: 2, name: 'Jane Smith', age: 25, status: 'inactive' },
{ id: 3, name: 'Bob Johnson', age: 35, status: 'active' }
]
const filteredData = data.filter(item => {
const matchesStatus = !filters.status || item.status === filters.status
const matchesAge = item.age >= filters.minAge
const matchesSearch = item.name.toLowerCase().includes(filters.searchTerm.toLowerCase())
return matchesStatus && matchesAge && matchesSearch
})
return (
<div>
<div className='filters'>
<input
type='text'
placeholder='Search by name...'
value={filters.searchTerm}
onChange={(e) => setFilters({...filters, searchTerm: e.target.value})}
/>
<select
value={filters.status}
onChange={(e) => setFilters({...filters, status: e.target.value})}
>
<option value=''>All Status</option>
<option value='active'>Active</option>
<option value='inactive'>Inactive</option>
</select>
<input
type='number'
placeholder='Min age'
value={filters.minAge}
onChange={(e) => setFilters({...filters, minAge: Number(e.target.value)})}
/>
</div>
{filteredData.map(item => (
<div key={item.id}>
<h3>{item.name}</h3>
<p>Age: {item.age} - Status: {item.status}</p>
</div>
))}
<p>Showing {filteredData.length} of {data.length} items</p>
</div>
)
The filters object in state tracks all filter criteria. The filter() method applies multiple conditions simultaneously using AND logic - all conditions must be true for an item to be included. Each condition checks if a filter is set before applying it, allowing optional filters. The spread operator updates individual filter properties while maintaining others.
Best Practice Note
This is the same filtering implementation we use in CoreUI React tables for advanced data filtering. For better performance with large datasets, consider debouncing filter inputs or implementing server-side filtering. Add a clear filters button to reset all criteria at once for better user experience.
