Last updated: Apr 6, 2024
Reading timeยท4 min
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 met, we return true
and the object gets included
in the new array.
const filtered = employees.filter(employee => { return employee.country === 'Canada'; });
If the condition is never met, the Array.filter
function returns an
empty array.
The second example shows how to use the logical AND (&&) operator to filter with multiple conditions.
const filtered2 = employees.filter(employee => { return employee.country === 'Canada' && employee.id === 3; });
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.
if ('hi'.length === 2 && 10 > 5) { // ๐๏ธ this runs console.log('Both conditions are met'); } else { console.log('At least one condition is NOT met'); }
The if
statement in the example checks for 2 conditions using the logical AND
(&&) operator.
The if
block runs because both conditions are met.
I've also written an article on how to update an array of objects state.
You can use the logical OR (||) operator to filter based on multiple conditions where only one has to be met.
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'}, ]; // ๐๏ธ Filter with 2 conditions (OR) const filtered = employees.filter(employee => { return ( employee.country === 'Canada' || employee.name === 'Bob' ); }); // ๐๏ธ [{id: 1, name: 'Alice', country: 'Canada'}, // {id: 2, name: 'Bob', country: 'Belgium'}, // {id: 3, name: 'Carl', 'country: 'Canada'}] console.log(filtered); return ( <div> {filtered.map(employee => { return ( <div key={employee.id}> <h2>name: {employee.name}</h2> <h2>country: {employee.country}</h2> <hr /> </div> ); })} </div> ); }
We used the logical OR (||) operator, so the expression will return true
if
either of the conditions is met.
const filtered = employees.filter(employee => { return ( employee.country === 'Canada' || employee.name === 'Bob' ); });
If an employee
object has country
property set to 'Canada' or a name
property set to 'Bob', it gets added to the results array.
if ('hi'.length === 2 || 1 > 50000) { // ๐๏ธ this runs console.log('At least one condition is met'); } else { console.log('None of the conditions are met'); }
The if
statement checks for 2 conditions using the logical OR (||) operator.
The first condition is met, so the if
block runs.
I've also written an article on how to sort an array of objects.
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.