Hey am running into this error, and am not getting where it is coming from exactly. I am having a nav bar with two drop downs which i want to render different menu items.
The first drop-down is working perfectly when i click it but the second one is not, instead i get this error on the screen minus warning in console
React.Children.only expected to receive a single React element child.
I have tried to wrap elements in <React.Fragment></React.Fragment/> but still the same issue.
Here is my component
import { UserOutlined, HeartOutlined, ShoppingCartOutlined, QuestionCircleOutlined, ShopOutlined } from '@ant-design/icons';
import { Button, Divider, Dropdown, Space, theme } from 'antd';
import React from 'react';
const { useToken } = theme;
const menuItems = [
{
key: '1',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
Place and Track Order
</a>
),
},
{
key: '2',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
Order Cancellation
</a>
),
},
{
key: '3',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
Returns and Refunds
</a>
),
},
{
key: '4',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
Payments and Jumia Account
</a>
),
},
{
key: '5',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
Help Center
</a>
),
},
];
const items = [
{
key: '5',
icon: <UserOutlined />,
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
MyAccount
</a>
),
},
{
key: '6',
icon: <ShopOutlined />,
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
Orders
</a>
),
},
{
key: '7',
icon: <HeartOutlined />,
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
Saved items
</a>
),
},
];
const AppHeader = () => {
const { token } = useToken();
const contentStyle = {
backgroundColor: token.colorBgElevated,
borderRadius: token.borderRadiusLG,
boxShadow: token.boxShadowSecondary,
};
const menuStyle = {
boxShadow: 'none',
};
return (
<div style={{ position: 'sticky', top: 0, zIndex: 1000 }}>
<nav class="bg-white border-gray-200 dark:bg-gray-900">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="https://flowbite.com/" class="flex items-center">
<img src="https://flowbite.com/docs/images/logo.svg" class="h-8 mr-3" alt="Flowbite Logo" />
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</a>
<form style={{ width: '600px' }} class="flex items-center">
<label for="voice-search" class="sr-only">Search</label>
<div class="relative w-full">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<input type="text" id="voice-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search Mockups, Logos" required />
<button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3">
<svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"></path></svg>
</button>
</div>
<button type="submit" class="inline-flex items-center py-2.5 px-3 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Search
</button>
</form>
<div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1">
<ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a href='/#'>
<Dropdown
menu={{
items
}}
placement="bottom"
arrow
trigger={['click']}
dropdownRender={(menu) => (
<div style={contentStyle}>
{React.cloneElement(menu, {
style: menuStyle,
})}
<Divider
style={{
margin: 0,
}}
/>
<Space
style={{
padding: 8,
}}
>
<Button type="primary">Login</Button>
</Space>
</div>
)}
>
<a onClick={(e) => e.preventDefault()} href='/#'>
<Button size='large' type='text'>
<Space>
<UserOutlined style={{ fontSize: '24px' }} />
Account
<svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</Space>
</Button>
</a>
</Dropdown>
</a>
</li>
<li>
<Dropdown
menu={{
menuItems,
}}
placement="bottom"
arrow
trigger={['click']}
>
<Button type="text" size='large'>
<Space>
<QuestionCircleOutlined style={{ fontSize: '24px' }} />
Help
<svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</Space>
</Button>
</Dropdown>
</li>
<li style={{ marginTop: '10px' }}>
<a href='/#'>
<Space>
<ShoppingCartOutlined style={{ fontSize: '24px' }} />Cart
</Space>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
);
};
export default AppHeader;
"antd": "^5.6.1", and create react app. Any one with any help will appreciated. thanksIn Antd Dropdown, items is an API you should pass to it your list. So In the first DropDown menu={{ items }} is the same as menu={{ items: items }}, but for the second DropDown you have a different name menuItems so you should pass menu={{ items: menuItems }}
change :
<Dropdown
menu={{
menuItems,
}}
placement="bottom"
arrow
trigger={['click']}
>
to :
<Dropdown
menu={{
items : menuItems,
}}
placement="bottom"
arrow
trigger={['click']}
>