React Antd dropdown throws if menu is dynamic

Question

I am trying to get an Antd dropdown based on an array but it keeps failing with Error: React.Children.only expected to receive a single React element child.

I have seen the other threads about it but I am confused because my menu works if the data is static: Here's a snippet

  var items = [
    {
      key: '0',
      label:  'item0',
    },
    {
      key: '1',
      label:  'item1',
    }
  ];
  
  var items2 = []
  for (let item of items) items2.push({key: items2.length.toString(), label: item.label})
  
  console.log(items, items2, JSON.stringify(items), JSON.stringify(items2), JSON.stringify(items) === JSON.stringify(items2) )
  
  return (<>
    <Dropdown menu={{ items }} trigger={['click']}>
      <a onClick={(e) => e.preventDefault()}>
        {name} <DownOutlined />
      </a>
    </Dropdown>
    <Dropdown menu={{ items2 }} trigger={['click']}>
      <a onClick={(e) => e.preventDefault()}>
        {name} <DownOutlined />
      </a>
    </Dropdown>
  </>)
  

As expected, items and items2 are the same by construction, and JSON.stringify(items) === JSON.stringify(items2) ) is true

However, clicking on the first dropdown with items works, while clicking on the second one throws.

How can I solve that issue?

Answer 1

the first works only by coincidence! because the variable name is items and since you have to specify the property name which is also items it works so

{{items}}

is in fact :

{{items:items}}

for the second one you should mention the property items because you have a differently named variable

{{items:items2}}