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
{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>
))}
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> {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