Loop through an Array of Objects in React

# Loop through an Array of Objects in React

To loop through an array of objects in React:

Use the map() method to iterate over the array.
The function you pass to map() gets called for each element in the array.
The method returns a new array with the results of the passed-in function.

App.js

Copied!
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  return (
    <div>
      {employees.map(employee => {
        return (
          <div key={employee.id}>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

loop through array of objects in react

The code for this article is available on GitHub

The function we passed to the Array.map() method gets called for each element in the array.

On each iteration, we set the key prop on the outermost element to a unique value, and rendered the values of the object.

Setting the key prop to a unique value is important, otherwise, you'd get the Encountered two children with the same key warning.

# Destructuring the object's properties

You can also destructure the object's properties to make your code a little easier to read.

App.js

Copied!
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  return (
    <div>
      {employees.map(({id, name, country}) => {
        return (
          <div key={id}>
            <h2>name: {name}</h2>
            <h2>country: {country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

The code for this article is available on GitHub

We destructured the parameters of the object parameter, so we don't have to access each property on the object.

Note that you shouldn't try to access the key property, otherwise, the warning Key is not a prop. Trying to access it will result in undefined is raised.

Alternatively, you can use the Array.forEach method.

# Loop through an Array of Objects using `forEach()`

This is a three-step process:

Use the forEach() method to iterate over the array.
Declare an empty array that will store the JSX elements.
On each iteration, push the JSX for the object into the array.

App.js

Copied!
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  const results = [];

  employees.forEach(employee => {
    results.push(
      <div key={employee.id}>
        <h2>name: {employee.name}</h2>
        <h2>country: {employee.country}</h2>

        <hr />
      </div>,
    );
  });

  return (
    <div>
      {results}
    </div>
  );
}

loop through array of objects using foreach

The code for this article is available on GitHub

This example achieves the same result.

The function we passed to the forEach() method gets called with each element (object) in the array.

Instead of directly rendering the object's values, we push the JSX markup for each object into a results array.

The last step is to render the array of results.

If you need to filter an array of objects in React, click on the following article.

# Loop through an Array of Objects using `for...of`

You can also loop through an array of objects using the for...of loop.

App.js

Copied!
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  const results = [];

  for (const employee of employees) {
    results.push(
      <div key={employee.id}>
        <h2>name: {employee.name}</h2>
        <h2>country: {employee.country}</h2>

        <hr />
      </div>,
    );
  }

  return (
    <div>
      {results}
    </div>
  );
}

loop through array of objects using for of

The code for this article is available on GitHub

The for...of loop can also be used to iterate over an array of objects.

You would use for...of instead of the forEach() method when you have to use the break keyword to exit out of a loop prematurely.

The break keyword cannot be used in the forEach() method, but it is supported in the for...of loop.

I've also written an article on:

If you need to loop through an object, click on the link and follow the instructions.

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.

Loop through an Array of Objects in React