CODEWITHSUNDEEP
reactjstypescriptantd
some of the things
some of the things

Reputation: 43

Adding element to antd Dropdown overlay property results in React single child error

Stripped down code:

const menu = (
  <Menu>
    <Menu.Item>
      1st menu item
    </Menu.Item>
  </Menu>
);

export const QBDropdown: React.FC = () => 
  <div>
    <Dropdown overlay={menu} />
  </div>

When attempting to populate the overlay property in the antd dropdown, the following error always occurs:

Error: React.Children.only expected to receive a single React element child.

It does so seemingly regardless of what I populate it with. A single <div></div> or <></> produces the same error. What's going on here?

Upvotes: 4

Views: 12746

Answers (4)

Arjun Santhosh
Arjun Santhosh

Reputation: 51

Try using a Dropdown like this in antd v5

const profileItems = [
{
  key: "1",
  label: (
    <a target="_blank" rel="noopener noreferrer">
      1st menu item
    </a>
  ),
},
{
  key: "2",
  label: (
    <a target="_blank" rel="noopener noreferrer">
      2nd menu item (disabled)
    </a>
  ),
  icon: <LoginOutlined />,
  disabled: true,
},
{
  key: "3",
  label: (
    <a target="_blank" rel="noopener noreferrer">
      3rd menu item (disabled)
    </a>
  ),
  disabled: true,
},
{
  key: "4",
  danger: true,
  label: "a danger item",
}]

<Dropdown menu={{ items: profileItems }}>
   <div className="logo">
      <LoginOutlined />
      <div>Profile</div>
   </div>
</Dropdown>

Upvotes: 4

Igor Alex
Igor Alex

Reputation: 1121

If you face that issue after updating to antd v5, it might be related to the new flow for the Dropdown menu(overlay old way).

Console warning:

Warning: [antd: Menu] children will be removed in next major version. Please use items instead.

deprecated way:

const menu = (
  <Menu>
    <Menu.Item key='1' onClick={() => handleDuplicate(record.id)}>
      Duplicate
    </Menu.Item>
  </Menu>
);
<Dropdown.Button href={url} overlay={menu}>
  Edit
</Dropdown.Button>

new:

const items = [{
  label: 'Duplicate',
  key: '1',
  onClick: () => handleDuplicate(record.id),
}];
const menuProps = {
  items,
};
<Dropdown.Button href={url} menu={menuProps}>
  Edit
</Dropdown.Button>

Upvotes: 1

amusameh
amusameh

Reputation: 76

The Dropdown menu must have a child. which can be verified using React.Children.only

 <div>
    <Dropdown overlay={menu}>
      <button>Something to trigger the menu</button>
    </Dropdown>
  </div>

https://reactjs.org/docs/react-api.html#reactchildrenonly

https://github.com/ant-design/ant-design/blob/bf72f5538a9a788639bd4b56a1ccc9f86ea453c3/components/dropdown/dropdown.tsx#L144

Upvotes: 6

ikmo
ikmo

Reputation: 298

it means ur Dropdown component must have one child

import { Menu, Dropdown, Button } from "antd";
const menu = (
  <Menu>
    <Menu.Item>
      1st menu item
    </Menu.Item>
  </Menu>
);

export const QBDropdown: React.FC = () => 
  <div>
    <Dropdown overlay={menu} placement="dropDown">
     <Button>dropdown</Button>
    </Dropdown>
  </div>

Upvotes: 0

Related Questions