Topic: Populate MDBSideNav Items with nested mapping loops, MDBSideNavCat drop down becomes disabled
I am trying to populate a sidenav from a json file using the map function. Some of the side nav items are dropdowns (MDBSideNavCat) that contain more links.
However, when I try to populate the dropdowns in a nested loop, the dropdowns don't function properly and will not open or dropdown.
<MDBSideNavNav>
{SideNavItems.CLE[1].layouts.map(NavItems => (
<MDBSideNavItem>
{NavItems.layouts &&
<MDBSideNavCat name={NavItems.title}>
{NavItems.layouts.map(DropdownItems => (
<MDBSideNavLink to={DropdownItems.friendlyURL}>
{DropdownItems.name}
</MDBSideNavLink>
))}
</MDBSideNavCat>
}
{!NavItems.layouts &&
<MDBSideNavLink to={NavItems.friendlyURL}>
{NavItems.title}
</MDBSideNavLink>
}
</MDBSideNavItem>
))}
</MDBSideNavNav>
Hi @Jake Meyer,
It's hard to test without your JSON file. Could you give me more code and send me a sample to show me the structure of your JSON file?
br
Jake Meyer commented 5 years ago
Here is one of the larger Json Objects I am trying to iterate through: { "id": "2", "layouts": [ { "id": "1", "friendlyURL":"/overview", "name":"Overview", "title":"Overview" }, { "id": "2", "friendlyURL":"/enlisted-advancement", "name":"Enlisted Advancement", "title":"Enlisted Advancement" }, { "id": "3", "friendlyURL":"/enlisted-advancement-manager", "name":"Enlisted Advancement Manager", "title":"Enlisted Advancement Manager" },
{
"id": "4",
"friendlyURL":"#",
"name":"My Dashboard (E4-E6)",
"title":"My Dashboard (E4-E6)",
"layouts":
[
{
"id": "1",
"friendlyURL":"/advancement-dashboard",
"name":"Advancement Dashboard",
"title":"Advancement Dashboard"
},
{
"id": "2",
"friendlyURL":"/dashboard-cycle-manager",
"name":"Advancement Cycle Manager",
"title":"Advancement Cycle Manager"
},
{
"id": "3",
"friendlyURL":"/advancement-content-manager",
"name":"Advancement Content Manager",
"title":"Advancement Content Manager"
},
{
"id": "4",
"friendlyURL":"/advancement-checklists-manager",
"name":"Advancement Checklists Manager",
"title":"Advancement Checklists Manager"
}
]
},
{
"id": "5",
"friendlyURL":"/fms-calculator",
"name":"FMS Calculator",
"title":"FMS Calculator"
},
{
"id": "6",
"friendlyURL":"/fms-calculator-manager",
"name":"FMS Calculator Manager",
"title":"FMS Calculator Manager"
},
{
"id": "7",
"friendlyURL":"#",
"name":"Selection Boards",
"title":"Selection Boards",
"layouts":
[
{
"id": "1",
"friendlyURL":"/active-duty-enlisted",
"name":"Active Duty Enlisted",
"title":"Active Duty Enlisted"
},
{
"id": "2",
"friendlyURL":"/active-duty-enlisted-resources-and-links-manager",
"name":"Active Duty Enlisted Resources & Links Manager",
"title":"Active Duty Enlisted Resources & Links Manager"
},
{
"id": "3",
"friendlyURL":"/active-duty-officer",
"name":"Active Duty Officer",
"title":"Active Duty Officer"
},
{
"id": "4",
"friendlyURL":"/active-duty-officer-resources-and-links-manager",
"name":"Active Duty Officer Resources & Links Manager",
"title":"Active Duty Officer Resources & Links Manager"
},
{
"id": "5",
"friendlyURL":"/reserve-enlisted",
"name":"Reserve Enlisted",
"title":"Reserve Enlisted"
},
{
"id": "6",
"friendlyURL":"/reserve-enlisted-resources-and-links-manager",
"name":"Reserve Enlisted Resources & Links Manager",
"title":"Reserve Enlisted Resources & Links Manager"
},
{
"id": "7",
"friendlyURL":"/reserve-officer",
"name":"Reserve Officer",
"title":"Reserve Officer"
},
{
"id": "8",
"friendlyURL":"reserve-officer-resources-and-links-manager",
"name":"Reserve Officer Resources & Links Manager",
"title":"Reserve Officer Resources & Links Manager"
}
]
},
{
"id": "8",
"friendlyURL":"#",
"name":"Resources & Links",
"title":"Resources & Links",
"layouts":
[
{
"id": "1",
"friendlyURL":"/misc-advancement-resources",
"name":"Misc. Advancement Resources",
"title":"Misc. Advancement Resources"
},
{
"id": "2",
"friendlyURL":"/misc-advancement-resources-and-Links-Manager",
"name":"Misc. Advancement Resources & Links Manager",
"title":"Misc. Advancement Resources & Links Manager"
},
{
"id": "3",
"friendlyURL":"/a-enlisted-advancement-resources-and-links",
"name":"Enlisted Advancement",
"title":"Enlisted Advancement"
},
{
"id": "4",
"friendlyURL":"/a-enlisted-advancement-resources-and-links-manager",
"name":"Enlisted Advancement Resources & Links Manager",
"title":"Enlisted Advancement Resources & Links Manager"
},
{
"id": "5",
"friendlyURL":"/p-officer-promotion-resources-and-links",
"name":"Officer Promotion",
"title":"Officer Promotion"
},
{
"id": "6",
"friendlyURL":"//p-officer-promotion-resources-and-links-manager",
"name":"Officer Promotion Resources & Links Manager",
"title":"Officer Promotion Resources & Links Manager"
}
]
},
{
"id": "9",
"friendlyURL":"/glossary",
"name":"Glossary",
"title":"Glossary"
},
{
"id": "10",
"friendlyURL":"/glossary-manager",
"name":"Glossary Manager",
"title":"Glossary Manager"
},
{
"id": "11",
"friendlyURL":"/acronym-finder",
"name":"Acronym Finder",
"title":"Acronym Finder"
},
{
"id": "12",
"friendlyURL":"/acronym-finder-manager",
"name":"Acronym Finder Manager",
"title":"Acronym Finder Manager"
},
{
"id": "13",
"friendlyURL":"/faqs",
"name":"FAQs",
"title":"FAQs"
},
{
"id": "14",
"friendlyURL":"/faq-manager",
"name":"FAQ Manager",
"title":"FAQ Manager"
}
]
},
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.18.0
- Device: Dell
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No