Borislav Hadzhiev
Fri Apr 22 2022·3 min read
Photo by Franz Aceituna
To filter an array of objects in React:
filter()
method on the array.Array.filter
methods returns an array with all elements that satisfy
the conditionexport default function App() { const employees = [ {id: 1, name: 'Alice', country: 'Canada'}, {id: 2, name: 'Bob', country: 'Belgium'}, {id: 3, name: 'Carl', country: 'Canada'}, {id: 4, name: 'Dean', country: 'Germany'}, ]; // 👇️ filter with 1 condition const filtered = employees.filter(employee => { return employee.country === 'Canada'; }); // 👇️ [{id: 1, name: 'Alice', country: 'Canada'}, // {id: 3, name: 'Carl', 'country: 'Canada'}] console.log(filtered); // 👇️ filter with 2 conditions const filtered2 = employees.filter(employee => { return employee.country === 'Canada' && employee.id === 3; }); // 👇️ [{id: 3, name: 'Carl', country: 'Canada'}] console.log('filtered2: ', filtered2); return ( <div> {filtered.map(employee => { return ( <div key={employee.id}> <h2>name: {employee.name}</h2> <h2>country: {employee.country}</h2> <hr /> </div> ); })} </div> ); }
The function we passed to the Array.filter method will get called with each element in the array.
filter()
method returns a new array that contains only the elements for which the callback function returns a truthy value.The first example checks if the country
property of each object is equal to
Canada
. If the condition is satisfied, we return true
and the object gets
included in the new array.
Array.filter
function returns an empty array.The second example shows how to use the logical AND (&&) operator to filter with multiple conditions.
You can chain the logical AND (&&) operator as many times as necessary and all of the conditions have to be met for the element to be included in the new array.
Note that you can directly call the map()
method after filtering.
export default function App() { const employees = [ {id: 1, name: 'Alice', country: 'Canada'}, {id: 2, name: 'Bob', country: 'Belgium'}, {id: 3, name: 'Carl', country: 'Canada'}, {id: 4, name: 'Dean', country: 'Germany'}, ]; return ( <div> {employees .filter(employee => { return employee.country === 'Canada'; }) .map(employee => { return ( <div key={employee.id}> <h2>name: {employee.name}</h2> <h2>country: {employee.country}</h2> <hr /> </div> ); })} </div> ); }
The filter()
method returns an array, so we can call map()
immediately
after.
If you only need to filter for a single object that satisfies a condition in
the array, use the Array.find()
method.
export default function App() { const employees = [ {id: 1, name: 'Alice', country: 'Canada'}, {id: 2, name: 'Bob', country: 'Belgium'}, {id: 3, name: 'Carl', country: 'Canada'}, {id: 4, name: 'Dean', country: 'Germany'}, ]; const employee = employees.find(obj => { return obj.country === 'Canada'; }); // 👇️ {id: 1, name: 'Alice', country: 'Canada'} console.log(employee); return ( <div> {employee && ( <div> <h2>Name: {employee.name}</h2> <h2>Country: {employee.country}</h2> </div> )} </div> ); }
The function we passed to Array.find gets called with each element in the array, until it returns a truthy value or iterates over all elements.
Array.find
.If the callback function never returns a truthy value, then Array.find
returns
undefined
.
This is why we used the logical AND (&&) operator - to make sure the employee
variable stores a truthy value, so we don't try to access a property on
undefined
and get a runtime error.
Even though the array contains 2 objects with country
property equal to
Canada
, only the first object is returned and the Array.find
method
short-circuits.