CODEWITHSUNDEEP
javascriptreactjsantdant-design-pro
johnest
johnest

Reputation: 21

React Antd dynamic dropdown menu

I am using Antd dropdown menu component with a JSON, I want to create a dynamic menu that changes depending on my JSON (that I am fetching using express)

so far I have

    const menu = (
  <Menu onClick={onClick}>
    {
    this.state.getSoftware.map((data,i) => (<Menu.item key={i}>{data.Name}</Menu.item>))
    }
  </Menu>
);

but this does not seem to be working, any help would be great!

Upvotes: 2

Views: 7756

Answers (1)

SumS
SumS

Reputation: 21

You need to map your items separately and then push it inside the menu object. This can happen inside render if you're updating the menu from the props.

const menus = Object.entries(scenes).map((key) => {
      return (
        <Menu.Item key={key[0]} icon={<UserOutlined />}>
          {key[1].name}
        </Menu.Item>
      )
    });
const menu = () => {
      return (
        <Menu onClick={handleMenuClick}>
          {menus}
        </Menu>
      )

and then render the menu inside the code:

<Dropdown overlay={menu}>
   <Button>
     Assign Navigation <DownOutlined />
   </Button>
 </Dropdown>

Upvotes: 1

Related Questions