Find and render Object in Array using React.js

Find and render Object in Array using React.js #

To find an object in an array in React:

Call the find() method on the array, passing it a function.
The function should return an equality check on the relevant property.
The find() method returns the first value in the array that satisfies the condition.

App.js

Copied!
const App = () => {
  const arr = [
    {id: 1, country: 'Austria'},
    {id: 2, country: 'Germany'},
    {id: 3, country: 'Austria'},
  ];

  // ✅ Find first object that matches condition
  const found = arr.find(obj => {
    return obj.id === 1;
  });

  // 👇️ {id: 1, country: 'Austria'}
  console.log(found);

  // -----------------------

  // ✅ Find multiple objects that satisfy condition
  const filtered = arr.filter(obj => {
    return obj.country === 'Austria';
  });

  // 👇️ [{id: 1, country: 'Austria'}, {id: 3, country: 'Austria'}]
  console.log(filtered);

  return (
    <div>
      {/* 👇️ render single object */}
      {found && (
        <div>
          <h2>id: {found.id}</h2>
          <h2>country: {found.country}</h2>
        </div>
      )}

      <hr />

      {/* 👇️ render array of objects */}
      {filtered.map(obj => {
        return (
          <div key={obj.id}>
            <h2>id: {obj.id}</h2>
            <h2>country: {obj.country}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

The code sample shows how to:

Find the first object that matches a condition in an array
Find multiple objects that satisfy a condition

The function we passed to the Array.find method gets called with each element (object) in the array until it returns a truthy value or iterates over the entire array.

On each iteration, we check if the id property of the object is equal to 1.

If the condition returns true, the find() method returns the corresponding object and short-circuits.

This is very convenient when you only need to get the first object that matches the specific condition.

There are no wasted iterations because once the condition is met, the find() method short-circuits and returns the object.

If the callback function we passed to the find method never returns a truthy value, the find method returns undefined.

App.js

Copied!
  const arr = [
    {id: 1, country: 'Austria'},
    {id: 2, country: 'Germany'},
    {id: 3, country: 'Austria'},
  ];

  const notFound = arr.find(obj => {
    return obj.id === 123;
  });
  console.log(notFound); // 👉️ undefined

This is why we used the logical (&&) operator - to check if the found variable stores a truthy value.

Use the filter() method to find multiple objects that satisfy a condition in an array in React. The filter method takes a function as a parameter and returns an array containing only the elements that satisfy the condition.

App.js

Copied!
const App = () => {
  const arr = [
    {id: 1, country: 'Austria'},
    {id: 2, country: 'Germany'},
    {id: 3, country: 'Austria'},
  ];

  // ✅ Find multiple objects that satisfy condition
  const filtered = arr.filter(obj => {
    return obj.country === 'Austria';
  });

  // 👇️ [{id: 1, country: 'Austria'}, {id: 3, country: 'Austria'}]
  console.log(filtered);

  return (
    <div>
      {/* 👇️ render array of objects */}
      {filtered.map(obj => {
        return (
          <div key={obj.id}>
            <h2>id: {obj.id}</h2>
            <h2>country: {obj.country}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

The function we passed to the Array.filter method gets invoked with every element in the array.

If the function returns a truthy value, the element gets added to the array that the filter() method returns.

Note that the filter method will iterate over the entire array, regardless of how many times the condition is met.

This way, we are able to get multiple objects that satisfy a condition from an array of objects.

In other words, we filter down the array to contain only objects that satisfy a condition.

If the callback function we passed to the filter method never returns a truthy value, the filter method returns an empty array.

We can use the Array.map method to render the array of objects in our React component.

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.

Find and render Object in Array using React.js

Find and render Object in Array using React.js #

Borislav Hadzhiev