How to Loop through an Object in React

avatar

Borislav Hadzhiev

Thu Apr 28 20223 min read

banner

Photo by Jake Melara

Loop through an Object in React #

To loop through an object in React:

  1. Use the Object.keys() method to get an array of the object's keys.
  2. Use the map() method to iterate over the array of keys.
App.js
export default function App() { const employee = { id: 1, name: 'Bob', salary: 123, }; return ( <div> {/* 👇️ iterate object KEYS */} {Object.keys(employee).map((key, index) => { return ( <div key={index}> <h2> {key}: {employee[key]} </h2> <hr /> </div> ); })} <br /> <br /> <br /> {/* 👇️ iterate object VALUES */} {Object.values(employee).map((value, index) => { return ( <div key={index}> <h2>{value}</h2> <hr /> </div> ); })} </div> ); }

We used the Object.keys method to get an array of the object's keys.

App.js
const employee = { id: 1, name: 'Bob', salary: 123, }; // 👇️ ['id', 'name', 'salary'] console.log(Object.keys(employee)); // 👇️ [1, 'Bob', 123] console.log(Object.values(employee));

We can only call the map() method on arrays, so we need to either get an array of the object's keys, or the object's values.

The function we passed to the Array.map method gets called with each element in the array and the index of the current iteration.

We used the index for the key prop in the examples, however it's better to use a stable, unique identifier if you have one.

When iterating over an object's keys, it's safe to use the object's key for the key prop, because the keys in an object are guaranteed to be unique.

App.js
export default function App() { const employee = { id: 1, name: 'Bob', salary: 123, }; return ( <div> {/* 👇️ iterate object KEYS */} {Object.keys(employee).map(key => { return ( <div key={key}> <h2> {key}: {employee[key]} </h2> <hr /> </div> ); })} </div> ); }

However, if you're iterating over the object's values, you can't safely use the value for the key prop, unless you can be certain that all of the values in the object are unique.

The key prop is used internally by React for performance reasons. It helps the library make sure to only re-render the array elements that have changed.

Having said that, you won't see any noticeable difference between using the index and a stable, unique identifier unless you're dealing with many thousands of array elements.

To loop through an object's values in React:

  1. Use the Object.values() method to get an array of the object's values.
  2. Use the map() method to iterate over the array of values.
App.js
export default function App() { const employee = { id: 1, name: 'Bob', salary: 123, }; return ( <div> {/* 👇️ iterate object VALUES */} {Object.values(employee).map((value, index) => { return ( <div key={index}> <h2>{value}</h2> <hr /> </div> ); })} </div> ); }

We used the Object.values method ot get an array of the object's values.

App.js
const employee = { id: 1, name: 'Bob', salary: 123, }; // 👇️ [1, 'Bob', 123] console.log(Object.values(employee));

If you only want to render the object's values, you can directly access them using this approach.

You can also use the Object.entries method which returns an array of key-value pair arrays.

App.js
export default function App() { const employee = { id: 1, name: 'Bob', salary: 123, }; console.log(Object.entries(employee)); return ( <div> {Object.entries(employee).map(([key, value]) => { return ( <div key={key}> <h2> {key}: {employee[key]} </h2> <hr /> </div> ); })} </div> ); }

Here is how the output from the Object.entries() method looks like.

App.js
const employee = { id: 1, name: 'Bob', salary: 123, }; // 👇️ [ // ['id', 1], // ['name', 'Bob'], // ['salary', 123], // ] const result = Object.entries(employee); console.log(result);

The method returns an array containing key-value pair sub-arrays.

An alternative approach is to use the Array.forEach() method to iterate over the object's keys and push JSX elements into an array which we then render.

App.js
export default function App() { const employee = { id: 1, name: 'Bob', salary: 123, }; const results = []; Object.keys(employee).forEach(key => { results.push( <h2 key={key}> {key}: {employee[key]} </h2>, ); }); return ( <div> {results} </div> ); }

The Array.forEach() method gets called with each key, however the forEach() method returns undefined, so we can't directly use it in our JSX code.

Instead, we push JSX elements into an array which we render.

Note that this is a more indirect approach and you won't see it used very often in React applications.

Use the search field on my Home Page to filter through my more than 1,000 articles.