Menu is not opening a correct index div

I think you just need

handlePanelBtn(item.title, childItemIndex, prevId)

instead of

handlePanelBtn(item.title, index, prevId)

https://codesandbox.io/s/panel-menu-2uwxo


I went ahead and transformed your code into a working example in the following code sandbox: https://codesandbox.io/s/panel-menu-hfrmx?fontsize=14&hidenavigation=1&theme=dark

It may seem like a lot of changes at first, so I'll elaborate a bit:

  • I extracted the menu header and the menu item list into their own components allowing for easier reuse
  • I rewrote your data structure, so that you don't need to define the menu items twice or even three times. This structure is flat, which also allows you to easily store it in a database might you want that.

Tags:

Reactjs