React Antd 动态下拉菜单

Question

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!

Answer 1

It's Menu.Item not Menu.item

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

Answer 2

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>