How to Filter an Array of Objects in React

# Filter an Array of Objects in React

To filter an array of objects in React:

Call the filter() method on the array.
On each iteration, check if a certain condition is met.
The Array.filter methods returns an array with all elements that satisfy the condition

App.js

Copied!
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 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>
  );
}

filter array of objects

The function we passed to the Array.filter method will get called with each element in the array.

The 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.

App.js

Copied!
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.

App.js

Copied!
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.

App.js

Copied!
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.

# Filter based on multiple conditions where only one has to be met

You can use the logical OR (||) operator to filter based on multiple conditions where only one has to be met.

App.js

Copied!
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 condition (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>
  );
}

filter based on multiple conditions where only one matches

We used the logical OR (||) operator, so the expression will return true if either of the conditions is met.

App.js

Copied!
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.

App.js

Copied!
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.

# Calling map() directly after filtering the array of objects

Note that you can directly call the map() method after filtering.

App.js

Copied!
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>
  );
}

filter array of objects

The filter() method returns an array, so we can call map() immediately after.

# Stop after the first matching object

If you only need to filter for a single object that satisfies a condition in the array, use the Array.find() method.

App.js

Copied!
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>
  );
}

stop after the first matching object

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.

Once the callback function returns a truthy value, the corresponding array element is returned from 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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to Filter an Array of Objects in React

# Filter an Array of Objects in React

# Filter based on multiple conditions where only one has to be met

# Calling map() directly after filtering the array of objects

# Stop after the first matching object

Borislav Hadzhiev