Loop through an Array of Objects in React

avatar

Borislav Hadzhiev

Last updated: Apr 23, 2022

banner

Photo from Unsplash

Loop through an Array of Objects in React #

To loop through an array of objects in React:

  1. Use the map() method to iterate over the array.
  2. The function you pass to map() gets called for each element in the array.
  3. The method returns a new array with the results of the passed in function.
App.js
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> ); }

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.

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

App.js
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> ); }

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

Alternatively, you can use the Array.forEach method.

To loop through an array of objects in React:

  1. Use the forEach() method to iterate over the array.
  2. Declare an empty array that will store the JSX elements.
  3. On each iteration, push the JSX for the object into the array.
App.js
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> ); }

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.

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

App.js
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> ); }

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 wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.