Using the forEach() method in React

avatar

Borislav Hadzhiev

Last updated: Apr 28, 2022

banner

Photo from Unsplash

Using the forEach() method in React #

The forEach() method can be used to iterate over an array outside of your JSX code in React. If you need to iterate over an array and render its elements directly in your JSX code, use the map() method instead.

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'}, ]; const results = []; // 👇️ can use forEach outside of your JSX code // if you need to call a function once for each array element employees.forEach((employee, index) => { results.push( <div key={index}> <h2>name: {employee.name}</h2> <h2>country: {employee.country}</h2> <hr /> </div>, ); }); // 👇️ or map() directly in your JSX code return ( <div> {employees.map((employee, index) => { return ( <div key={index}> <h2>name: {employee.name}</h2> <h2>country: {employee.country}</h2> <hr /> </div> ); })} <hr /> <hr /> <hr /> {results} </div> ); }

The Array.forEach method can be used when you need to call a function for every element in an array.

However, forEach() can't be used to iterate over an array directly in your JSX code.

The forEach() method calls the provided function with each element in the array but returns undefined.

Using it directly in our JSX code wouldn't make sense because we need to return JSX elements and not undefined.

You could use the forEach() method to:

  1. Iterate over an array.
  2. Push JSX elements into a new array.
  3. Render the JSX elements.
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'}, ]; const results = []; employees.forEach((employee, index) => { results.push( <div key={index}> <h2>name: {employee.name}</h2> <h2>country: {employee.country}</h2> <hr /> </div>, ); }); return <div>{results}</div>; }

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

We can render the results array directly in our JSX code because it's an array of JSX elements

To iterate over an array and render its elements directly in your JSX code, use the Array.map method.

App.js
export default function App() { const employees = ['Alice', 'Bob', 'Carl']; return ( <div> {employees.map((employee, index) => { return ( <div key={index}> <h2>name: {employee}</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 element.

You can also use the for...of loop in a similar way to how we used the forEach() method.

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'}, ]; 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.