React AntDesign Menu Sub Item … make it work like component

  antd, drop-down-menu, javascript, menu, reactjs

For the AntD menu … we utilise <Menu>, <Menu.Item>, <SubMenu>.

But I don’t want to use these for navigation but rather for representation. I want to display the attributes of an object using a dropdown as such.

For eg. Apple -> red, fruit; Cucumber -> green, vegetable; would be displayed as a menu with Apple and Cucumber as the Submenu headings, and the dropdowns for each would be red, fruit and green, vegetable respectively.

But I don’t want to predefine attributes and Submenu headings. If it was a component (cards for example), I could’ve made the component render per object, so that if there were 10 objects, 10 cards (for example) would be rendered.

Is it possible to do the same for <SubMenu> and <Menu.Item> where I send the data and it first looks at the key ‘Name’ and renders as a Submenu Heading and renders attributes individually as Menu Items within the Submenu?

Are there any alternatives I can make use of?

Not sure If my question is very clear … I’m happy to clarify anything if confused.

Source: Ask Javascript Questions