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 satisfied, we return true and the object gets included in the new array.

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.

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.

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.

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

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.

Filter an Array of Objects in React

Filter an Array of Objects in React #

Borislav Hadzhiev