How to render nested array using map() in React

The topic of this article will be how to render nested array using map() in React. You can do this using nested maps or the JSON() method.

Render nested array using map()

For example, if you have a complex nest array with arrays and objects inside, how can you iterate through the elements and render them to the screen? You can use the map() method of the array to do this but not just with a map() loop. Please read the article to know how to do it in detail.

Using nested array.map()

The React, array.map() method creates a new array with the results of calling a given function on each element of this array. This method is a function that a confident React programmer must know to work with arrays to render or compute values. With a nested array, you need to use two or more array.map() to iterate through its elements.

Code:

import React from "react";

const App = () => {
  const listUser = [
    {
      total: 2,
      list: [
        { id: 1, name: "Tom" },
        { id: 2, name: "John" },
      ],
    },
    { total: 1, list: [{ id: 3, name: "Jane" }] },
  ];

  return (
    <>
      <h2>Render nested array using map() in React | LearnShareIT</h2>
      <hr />
      <div>
        {listUser.map((item, index) => {
          return (
            <div key={index}>
              <ul>This list have {item.total} users:</ul>
              {item.list.map((subitem, i) => {
                return (
                  <ul>
                    <li>{subitem.name}</li>
                  </ul>
                );
              })}
            </div>
          );
        })}
      </div>
    </>
  );
};

export default App;

Output:

In the above example, we have a nested array with two levels of nested arrays, so you need to use map() twice to iterate over the elements of the outer array and map() twice to iterate. Elements of the subarray. Pay attention to the output. You can see all the nested array elements rendered on the screen.

Using JSON.stringtify() method

JSON.stringify() is considered one of the popular JSON functions. It is used to convert a JavaScript Object into a JSON string.

When developing an application in Javascript, the programmer needs to automatize the data into strings to proceed to store the data in the form of strings.

Code:

import React from "react";

const App = () => {

  const listUser = [
    {
      total: 2,
      list: [
        { id: 1, name: "Tom" },
        { id: 2, name: "John" },
      ],
    },
    { total: 1, list: [{ id: 3, name: "Jane" }] },
  ];
  
  return (
    <>
      <h2>Render nested array using map() in React | LearnShareIT</h2>
      <hr />
      <div>
        {listUser.map((item, index) => {
          return (
            <div key={index}>
              <div>This list have {item.total} users:</div>
              {JSON.stringify(item.list)}
            </div>
          );
        })}
      </div>
    </>
  );
};

export default App;

Output:

Using this approach, you can see the elements inside and which part of the nested array you have reached. This approach is more suitable for programmers to debug and write the code’s logic efficiently. You can get all the necessary values ​​inside the nested array.

Summary

In summary, you have been shown how to render nested array using map() in React, but you should use the nested array. map() to do this efficiently and appropriately.

Maybe you are interested:

• Find and render Object in Array using React.js
• How to Reverse an Array in React
• Replace an Object in Array in React state

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