Как сделать Dynami c Sidebar из Json api?

Question

Я пытаюсь создать React Dynami c Sidebar из Json API.

Мне нужна помощь при кодировании для двойной итерации в React с использованием следующих трех условий:

1. if json id элемента === 0 ===> внешний Mennuitem 1-го уровня

2. if json element [i] id === [j ] parent_id ===> элемент подменю 2-го уровня

3. if parent_id [i] === [j] id && [j] parent_id === 0 ===> подменю 3-го уровня

Но я могу добиться внешнего MenuItem. Но мне не удается создать SubMenuItem.

Пожалуйста, помогите мне решить эту проблему. См. Прикрепленное изображение. Спасибо

 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

см. Эту карту:

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