Ant Design of React - Use List component inside Dropdown component

Question

I'm using Ant Design of React. And I used Ant Design list component inside Ant Design dropdown component.

The code ran without a problem, But I received two errors in the console!

class App extends Component {
  state = {
    notifData: [
      { title: "Ant Design Title 1" },
      { title: "Ant Design Title 2" },
      { title: "Ant Design Title 3" },
      { title: "Ant Design Title 4" }
    ]
  };
  render() {
    const headerNotifDropdown = (
      <List
        itemLayout="horizontal"
        dataSource={this.state.notifData}
        renderItem={item => (
          <List.Item>
            <List.Item.Meta
              avatar={<Avatar icon="user" />}
              title={item.title}
              description="Ant Design, a design language for background applications, is refined by Ant UED Team"
            />
          </List.Item>
        )}
      />
    );
    return (
      <ul>
        <li>
          <Dropdown overlay={headerNotifDropdown} trigger={["click"]}>
            <a href="#notif">
              <Badge count={5}>
                <Icon type="notification" />
              </Badge>
            </a>
          </Dropdown>
        </li>
      </ul>
    );
  }
}

codesandbox

Can somebody help?

Answer 1

It's actually a warning by React, that an unknown property is added to the DOM.

But, the main issue is the wrong usage of the overlay prop. As per docs , you're supposed to use a Menu as an overlay. antd assumes that you're passing a Menu and tries to inject some Menu specific props. And you're passing a List , which doesn't understand these injected props.

So, the solution would be to use a Menu and not a List .

Note: FYI, the prop names that are popping up in your console are actually props of rc-menu , which antd uses under the hood.