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

Anyone has any idea.
```
 How to solve this problem.
```

This question looks very similar to yours: Recursive component rendering based on a tree menu object — Janez Kuhar
– Janez Kuhar, Commented May 11, 2021 at 6:21

Amila Senadheera · Accepted Answer · 2021-05-11 10:45:57Z

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

edited May 11, 2021 at 10:45

answered May 11, 2021 at 6:19

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Janez Kuhar Over a year ago

This seems correct, but it would be worth noting that since you are using plain javascript function calls, no components get created.

Amila Senadheera Over a year ago

@JanezKuhar,it is working fine. I have added a sandbox URL as well

Sonunigam Bar Over a year ago

But I want print the item structure like <div class="menu-container"> <div class="menu-item">ABC</div> <div class="menu-item sub-nav"> XYZ <div class="menu-container"> <div class="menu-item"><a href="#">PQR</a></div> <div class="menu-item"><a href="#">MOB</a></div> <div class="menu-item sub-nav">TOC <div class="menu-container"> <div class="menu-item"><a href="#">LOL</a></div> <div class="menu-item"><a href="#">RST</a></div> </div> </div> </div> </div> <div class="menu-item">DEF</div> </div>

Sonunigam Bar Over a year ago

Intend is missing due to adding comments. plz, follow the proper indent. I want to put the value in this way

Amila Senadheera Over a year ago

@Sonunigam Bar, I have updated the answer check. Please mark this answer once you have check it. Thanks!

Collectives™ on Stack Overflow

How to Recursion using map in react

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related