React JS - Multi level dropdown menu

Question

I have this example . My question is simple: how can I have only one submenu opened at a time?

eg: When the "menu 3" is opened I want "menu 2" to be closed..

Answer 1

Instead of an array for activeMenus state, use a single value, which can be null if no menus are open. (And change the name to activeMenu .)

In handleArrowClick , set activeMenu to null if it's already menuName , or menuName otherwise.

setActiveMenu(activeMenu === menuName? null: menuName)

When rendering SubMenu , toggle={activeMenu === menuName}