How to Recursion using map in react

Question

I have JSON data and I want to read all the data and make a dropdown list. Here is the sample code I have written. In this code only 2nd level it is showing. I want all levels.

{
                                menu_data.map((menu)=>(
                                    menu.children ? 
                                    <div class="menu-item sub-nav">{menu.name}
                                         <div class="menu-container">{menu.children.map((child)=>(<div class="menu-item"><a href={child.url}>{child.name}</a></div>))}</div>
                                    </div>
                                    :
                                    <div class="menu-item">{menu.name}</div>
                                       
                                ))
                            }

The JSON data looks like

[{
   "name": "ABC",
   "url": "/abc.html"
},
{
   "name": "XYZ",
   "children": [{
         "name": "PQR",
         "url": " /pqr.jsp"
      },
      {
         "name": "MOB",
         "url": "/hello"
      },
      {
         "name": "TOC",
         "children": [
                {
                 "name": "LOL",
                 "url": "/hello"
              },
              {
                 "name": "RST",
                 "url": "/hello"
              },
              {
                 "name": "NULL",
                 "url": "/hello"
              }
         ]
      },
         ]
      }
   ]
},
{
   "name": "def",
   "url": "/def.html"
}
]

please refer to this screenshot. in this way, I want to show. enter image description here

1. Anyone has any idea.

    How to solve this problem.
   

Answer 1

Your menu_data also had an issue:

const menu_data = [
    {
        name: "ABC",
        url: "/abc.html",
    },
    {
        name: "XYZ",
        children: [
            {
                name: "PQR",
                url: "/pqr.jsp",
            },
            {
                name: "MOB",
                url: "/hello",
            },
            {
                name: "TOC",
                children: [
                    {
                        name: "LOL",
                        url: "/hello",
                    },
                    {
                        name: "RST",
                        url: "/hello",
                    },
                    {
                        name: "NULL",
                        url: "/hello",
                    },
                ],
            },
        ],
    },
    {
        name: "def",
        url: "/def.html",
    },
];

Define a recursive menu renderer as below:

    const renderMenu = (menu) => {
        return menu.map((item) => (
            <>
                {item.children ? (
                    <div className="menu-item sub-nav">
                        {item.name}
                        <div className="menu-container">
                            {renderMenu(item.children)}
                        </div>
                    </div>
                ) : (
                    <div className="menu-item">
                        <a href={item.url}>{item.name}</a>
                    </div>
                )}
            </>
        ));
    };

Render it like below:

    return <div className="menu-container">{renderMenu(menu_data)}</div>;

Working Example here: https://codesandbox.io/s/confident-cloud-hw5pl?file=/src/App.js