How to Render Nested Map Items inside react component

Question

I have a react navigation component that is rendered based on some JSON data.

I have sucessfully rendered the top level items, but I'm having trouble rendering the second level sub pages.

This is how I think the code should look I also only want the

tag to be output can someone help me with the syntax to achive this?

    {headerData.TopLevelPages.map(toplevelPage => (
        <li key={toplevelPage.Id}>{toplevelPage.NavLinkText}</li>
    
         <ul>//Only out put UL If SubNavMenuItems as items
    
            {toplevelPage.SubNavMenuItems.map(sublevelPage => (
                   <li key={sublevelPage.Id}>{sublevelPage.NavLinkText}</li>
                 ))}
    
        <ul>

   ))}

Amila Senadheera · Accepted Answer · 2022-02-20 10:49:57Z

1

A simple recursive function can render a nested menu with any depth.

Try like below.

const headerData = { TopLevelPages: [ { NavLinkText: "Text 1", Id: "1", SubNavMenuItems: [ { NavLinkText: "sub Text 1-1", Id: "1-1" }, { NavLinkText: "sub Text 1-2", Id: "1-2", SubNavMenuItems: [ { NavLinkText: "sub-sub Text 1-2-1", Id: "1-2-1" } ] } ] }, { NavLinkText: "Text 2", Id: "2" } ] };

function App() {
  
  const renderNavMenu = (menus) => {
    return menus.map(({ NavLinkText, Id, SubNavMenuItems }) => (
      <ul>
        {/* render current menu item */}
        <li key={Id}>{NavLinkText}</li>
        {/* render the sub menu items */}
        {SubNavMenuItems && <ul>{renderNavMenu(SubNavMenuItems)}</ul>}
      </ul>
    ));
  };

  return renderNavMenu(headerData.TopLevelPages);
}

ReactDOM.render(<App/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

answered Feb 20, 2022 at 10:49

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

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

1 Comment

Amila Senadheera Over a year ago

@Ayo Adesina, check this out !!

David Yappeter · Accepted Answer · 2022-02-20 10:40:26Z

0

    {headerData.TopLevelPages.map(toplevelPage => (
        <li key={toplevelPage.Id}>{toplevelPage.NavLinkText}</li>
    
    { toplevelPage.SubNavMenuItems && 
        ( <ul>//Only out put UL If SubNavMenuItems as items
    
            {toplevelPage.SubNavMenuItems.map(sublevelPage => (
                   <li key={sublevelPage.Id}>{sublevelPage.NavLinkText}</li>
                 ))}
    
        <ul>)
    }

   ))}

do a conditional rendering once more

answered Feb 20, 2022 at 10:40

David Yappeter

1,6309 silver badges16 bronze badges

1 Comment

Ayo Adesina Over a year ago

This doesn't seem to complie, the error is after the first </li> Unexpected token, expected ","

Collectives™ on Stack Overflow

How to Render Nested Map Items inside react component

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related