Dynamic submenus possible?

[dremin]

Hi! I have some data that I am attempting to dynamically generate a menu and submenus for (the data is divided into categories, and I'd like a submenu per category). Unfortunately, I keep running into issues when trying to open any of the said submenus when doing this--sometimes freeze, sometimes 'maximum update depth' errors, sometimes nothing happens. Is what I am attempting possible? Here is my non-working code.

[nkrantz]

Hi @dremin - should be possible! We forked your Codesandbox to demonstrate the behavior. Let us know if you have any questions. Thanks!

[dremin]

Thanks @nkrantz! That works in the sandbox, but unfortunately the additional prop on MenuItem upsets TypeScript, which makes that not a usable solution for us in its current state. To work around this I created a new component that wraps MenuItem, but now I am back to the previous broken behavior. I feel like I am missing something subtle about why the version you provided works 😄 Here's an updated sandbox with the wrapped MenuItem, would you be able to help explain what is causing this to not work? Thanks!

[TheSisb]

The version provided by Nora works simply for the fact that she moved the looped inline-component into a functional component. From your original version, you're calling the menu hook inside a loop, inside an inline-component:

In your new example, you're doing the same thing again:

You can review the rules of hooks here: https://legacy.reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

--

Finally, here's a fully cleaned up version: https://codesandbox.io/s/great-heisenberg-d2rvph?file=/src/Menu/SubMenu.tsx

[dremin]

@TheSisb Thank you for the explanation 🙏 That makes sense and I have now successfully implemented this. Thanks to both you and @nkrantz for the help, I greatly appreciate it!