How to loop through an array of objects in React

This is a simple example of the easiest way to loop through an array of objects in React and display each object.

The easiest way to loop through an array of objects in React is using the array’s map function to display a component for each item in the array.

Let’s start with an array of users. Each user has a name and age.

const users = [
  {
    name: "John",
    age: 24
  },
  {
    name: "Pete",
    age: 26
  }
]Code language: JavaScript (javascript)

We can pass our array of users as props into the ShowUsers component to display a list of the names in React like this…

const ShowUsers = ({ users }) => {
  return (
    <ul>
      {users.map(user => <li key={user.name}>{user.name}</li>)}
    </ul>
  )
}Code language: JavaScript (javascript)

If you want to instead use a custom component for the user display, you could do this:

const UserDisplay = ({ user }) => (
  <div>
    {user.name} - age: {user.age}
  </div>
)

const ShowUsers = ({ users }) => (
  <ul>
    {users.map(user => <UserDisplay key={user.name} user={user} />)}
  </ul>
)Code language: JavaScript (javascript)

This is a pretty clean pattern, but we could tighten it up even more using rest/spread to pass the properties of the user into our component like this:

const UserDisplay = ({ name, age }) => (
  <div>
    {user.name} - age: {user.age}
  </div>
)

const ShowUsers = ({ users }) => (
  <ul>
    {users.map(user => <UserDisplay key={user.name} ...user />)}
  </ul>
)Code language: JavaScript (javascript)

Setting the UserDisplay prop to …user is the same as passing name={name} and age={age}. The “…” unpacks an object into a list of it’s key/value pairs. This is often used to merge objects together, but in this case, passes each key/value pair as an individual prop to the component.

Also, you probably noticed that anywhere you render a component inside a map you need to include a key prop that will be unique for each component. This is essential for React to be able to manage the items in the DOM. Without the key prop you will get a warning in the console. You may also notice that if your component adds or deletes components you may end up with strange display behavior, like duplicate components.

Looping through object properties

Sometimes you want to loop through the properties of an object instead of an array. You can do that just like the above examples by converting the object into an array of it’s keys using Object.keys().

const user = {
  name: 'John',
  age: 23,
  weight: 175,
}

const ShowUser = ({ user }) => (
  <ul>
    {Object.keys(user).map(key => <li>{key}: {user[key]}</li>)}
  </ul>
)Code language: JavaScript (javascript)

This will loop through each key of the object and display the key name and value. In order to access the value we have to do user[key] since the only thing passed to function is the key and not the entire object. Fortunately, the object is available to all parts of the component since it was passed as a prop.

Additional Resources

• Complete description of rest and spread