How to use a map() inside a map() function in React

This article will show you how to use a map() inside a map() function in React in several ways, like using it directly or mapping via a function. Let’s read it now.

Use a map() inside a map() function in React

You are probably having trouble with this topic because you are dealing with a nested array, so what is a nested array? It’s an array that contains one or more other arrays in its members, like the example below.

Code:

  const footballer=[{
    name: "Ronaldo",
    age: "37",
    club:["MU", "Real", "Juventus"],
  },{
    name: "Messi",
    age: "35",
    club:["Barcelona","PSG"]
  }];

You can see that in the footballer array, its inner elements contain additional sub-arrays inside, and if we want to access it, we will have to use a map() inside a map() function.

Using map() directly method

The map() function will iterate through each element of the array. The input parameter is an anonymous function. An anonymous function will have a parameter passed, which is each loop’s element. Inside the anonymouse function, the body will have a return statement that returns a value, and this value will replace that element.

Syntax:

array.map(function(item){
     return item; // return value will replace the original value of the element
});

Parameter:

•  item is the repeating element.

Using map() inside a map, we can render all the content of the array introduced above using the code below.

Code:

import React from "react";
 
const App = () => {
  const footballers = [
    {
      name: "Ronaldo",
      age: "37",
      clubs: ["MU", "Real", "Juventus"],
    },
    {
      name: "Messi",
      age: "35",
      clubs: ["Barcelona", "PSG"],
    },
  ];
  return (
    <>
      <h2>Use a map() inside a map() function in React | LearnShareIT</h2>
      <hr />
      <ul>
        {footballers.map((footballer) => {
          return (
            <div>
              <li>Name: {footballer.name}</li>
              <li>Age: {footballer.age}</li>
              <li>{footballer.clubs.map((club)=>{
                return(
                  <p>{club}</p>
                )
              })}</li>
            </div>
          );
        })}
      </ul>
    </>
  );
};
 
export default App;

Output:

Using the map() method with the array, we could iterate through every element of the footballer array. And in the first map, we use one more map with footballer.clubs also an array, so we can already use a map() inside a map() function in React.

Map via function method

This method will create a function to map a specific private array like the code below. We will name it mapChild. Take a look at the code below to understand more.

Code:

import React from "react";
 
const App = () => {
  const footballers = [
    {
      name: "Ronaldo",
      age: "37",
      clubs: ["MU", "Real", "Juventus"],
    },
    {
      name: "Messi",
      age: "35",
      clubs: ["Barcelona", "PSG"],
    },
  ];
 
  function mapChild(footballer) {
    footballer.clubs.map((club) => {
      console.log(club);
    });
  }
 
  return (
    <>
      <h2>Use a map() inside a map() function in React | LearnShareIT</h2>
      <hr />
      <ul>
        {footballers.map((footballer) => {
          return (
            <div>
              <li>Name: {footballer.name}</li>
              <li>Age: {footballer.age}</li>
              {mapChild(footballer)}
            </div>
          );
        })}
      </ul>
    </>
  );
};
 
export default App;

Output:

When you use this map function, you must pass an array as an argument and look at the console. You can see that the program has printed it to the screen. Wish you success with the methods in the article.

Summary

To summarize, you already know two methods to use a map() inside a map() function in React, but using a subfunction will be reused in different codes. Let’s try these methods. Good luck for you!

Maybe you are interested:

• How to map() only a portion of an Array in React
• Use map() on an Array in Reverse Order in React
• Using the map() method with index in React

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs