How to make dynamic Sidebar from Json api? - json

Question

I am trying to create a React Dynamic Sidebar from the Json API.
I need a coding assist for double iteration in React by using below three conditions:
if json element id === 0 ===> outer 1st level Mennuitem
if json element[i] id ===[j] parent_id ===> 2nd level submenu item
if parent_id[i]===[j] id && [j]parent_id===0 ===>3rd level submenuitem
But I can achieve outer MenuItem. But I fail to create SubMenuItem.
Please help me to fix this issue. Please see the attached image. Thanks
class App extends Component {
constructor(props) {
super(props);
this.state = {
mz:[
{
"id": 1,
"name": "Menu1",
"parent_id": 0
},
{
"id": 9,
"name": "SubMenu1-Menu1",
"parent_id": 1
},
{
"id": 26,
"name": "8989",
"parent_id": 9
},
{
"id": 10,
"name": "SubMenu2-Menu1",
"parent_id": 1
},
{
"id": 2,
"name": "Menu2",
"parent_id": 0
},
{
"id": 11,
"name": "SubMenu1-Menu2",
"url": "",
"order": 210,
"type": 3,
"is_active": true,
"parent_id": 2
},
{
"id": 12,
"name": "SubMenu2-Menu2",
"url": "",
"order": 220,
"type": 3,
"is_active": true,
"parent_id": 2
}],};
}
render() {
return (
<div>
{this.state.api.filter((el) => (el.parent_id === 0 ? el.name : null)).map((el) => (
<ReactBootStrap.Navbar >
{el.name}
<ReactBootStrap.NavDropdown>
{(el.parent_id === el.id ? el.name : null).map((el) =>el.name)}//I CANNOT ITERATE CORRECTLY THIS PART
</ReactBootStrap.NavDropdown>
</ReactBootStrap.Navbar>
))}
</div>
);
}
}
export default App;

Answer 1

see this map:
this.state.mz.map(item => {
if(item.parent_id === 0){
output[item.id] = item
} else {
if(!output[item.parent_id]['submenu']){
output[item.parent_id]['submenu'] = {}
}
output[item.parent_id]['submenu'][item.id] = item
}
})