How to Render nested array using map() in React

# Render nested array using map() in React

To render a nested array using map():

1. Use the map() method to iterate over the outer array.
2. On each iteration, call the map() method on the nested array.
3. Render the elements of the nested array.

Copied!
export default function App() {
  const people = [
    {id: 1, name: 'Alice', pets: ['dog', 'cat']},
    {id: 2, name: 'Bob', pets: ['turtle', 'rabbit']},
    {id: 3, name: 'Carl', pets: ['hamster', 'parrot']},
  ];

  return (
    <div>
      {people.map((person, index) => {
        return (
          <div key={index}>
            <h2>Name: {person.name}</h2>

            {person.pets.map((pet, index) => {
              return (
                <div key={index}>
                  <h2>Pet: {pet}</h2>
                </div>
              );
            })}

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

The code sample shows how to render a nested array with 2 calls to the Array.map() method.

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

On each iteration, we render the name property of the person object and use a nested map() to iterate over the pets array of each person.

Notice that when calling the map() method inside of our JSX code, we have to use curly braces {} to wrap the call to map().

# Using an implicit return

We used arrow functions with explicit return statements in both calls to the map() method.

If you only need to render some JSX elements and don't use conditions, declare variables, etc, you can use an implicit return, which would make your code a little more readable.

Copied!
export default function App() {
  const people = [
    {id: 1, name: 'Alice', pets: ['dog', 'cat']},
    {id: 2, name: 'Bob', pets: ['turtle', 'rabbit']},
    {id: 3, name: 'Carl', pets: ['hamster', 'parrot']},
  ];

  return (
    <div>
      {people.map((person, index) => (
        <div key={index}>
          <h2>Name: {person.name}</h2>

          {person.pets.map((pet, index) => (
            <div key={index}>
              <h2>Pet: {pet}</h2>
            </div>
          ))}

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

We used implicit returns for both of the arrow functions we passed to the map() method.

Copied!
const arr = ['a', 'b', 'c'];

// 👇️ Explicit return
const result1 = arr.map(element => {
  return element;
});

// 👇️ Implicit return
const result2 = arr.map(element => element);

You can only use implicit returns when you don't have to use conditionals or define variables in the function you pass to map().

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 unless you're dealing with many thousands of array elements.

It is important that the key prop is unique, otherwise, you'd get the Encountered two children with the same key warning.

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.

# Using a map() inside a map() function in React

A very common pattern when you have an array of objects containing properties with array values is to use a map() method inside another map() method.

Copied!
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', tasks: ['dev', 'test', 'ship']},
    {id: 2, name: 'Bobby Hadz', tasks: ['design', 'test']},
    {id: 3, name: 'Carl', tasks: ['test']},
  ];

  return (
    <div>
      {employees.map((employee, index) => {
        return (
          <div key={index}>
            <h2>Name: {employee.name}</h2>

            {employee.tasks.map((task, index) => {
              return (
                <div key={index}>
                  <h2>Tasks: {task}</h2>
                </div>
              );
            })}

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

The first call to the Array.map() method iterates over the array of objects.

The second (nested) call to the Array.map() method iterates over the value of each tasks array.

If the tasks property were an array of objects, you would have to use another call to the Array.map() method to iterate over the nested array and render its values.

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

I've also written an article on how to sort an array of objects.