How To Manage Multiple Navigation Items States?

I'm trying to implement a horizontal menu with antd components. When clicking the nav items the submenu is not showing correctly. Codesandbox demo. const MenuList = [ { nam

Solution 1:

There are a few issues that need to be handled:

1. Assign unique key for every array item in order to render components correctly.

   menuList.map(item => <TabPane key={item.name}></TabPane>);

2. You need to manage every menu's state in order to show menus correctly with the corresponding icon showMenuManager[item.name]:

<Tabs
  onTabClick={e =>setShowMenuManager(prev => {
      const newState = { ...initMenuState, [e]: !prev[e] };
      console.log(newState);
      return newState;
    })
  }
/>;

const initMenuState = {
 "Navigation two - Submenu": false,
 "Navigation Three - Submenu": false
};

functionTopMenuManager() {
 const [showMenuManager, setShowMenuManager] = useState(initMenuState);
 return (
   <Tabs... >
     {menuList.map(item => (
       <TabPanekey={item.name}tab={
           <>
             ...
             <Icontype={showMenuManager[item.name] ? "up" : "down"}
             /></>
         }
       >
         {showMenuManager[item.name] && ...}
       </TabPane>
     ))}
   </Tabs>
 );
}

Check the final example and forked sandbox: