How do I make a Dropdown menu in AntD not display the three little dots next to it? - antd

Question

If you look at the screenshot below, you can see what is being rendered:
rendering of antd dropdown with three dots
Code:
<Column title="Category" render={(text, record) => (
<Dropdown placement="bottomLeft"
overlay={
<Menu>
{productCategories.map(category => (
<Menu.Item key={category.id}>
<a href="#" onClick={(event) => {event.preventDefault(); }}>
{category.name}
</a>
</Menu.Item>
))}
</Menu>
}
>
<Dropdown.Button>
Category // eventually this will be the selected category name
</Dropdown.Button>
</Dropdown>
)} />
There are two problems I'm experiencing:
The three dots are appearing... I don't know why
Whenever I hover my mouse over the three dots, an error occurs: React.Children.only expected to receive a single React element child. and the page just goes blank.
Helpful answers appreciated.

Answer 1

The first error occurs because you are using Dropdown.Button instead of Button inside Dropdown.
The second error occurs because overlay props must be passed to Dropdown.Button
To fix both errors you need to replace Dropdown.Button with Button
<Column title="Category" render={(text, record) => (
<Dropdown placement="bottomLeft"
overlay={
<Menu>
{productCategories.map(category => (
<Menu.Item key={category.id}>
<a href="#" onClick={(event) => {event.preventDefault(); }}>
{category.name}
</a>
</Menu.Item>
))}
</Menu>
}
>
<Button>
Category // eventually this will be the selected category name
</Button>
</Dropdown>
)} />