Antd Select console error: `children` should be `Select.Option` or `Select.OptGroup` instead of `Option`

Question

I am using a wrapper around Antd Select component.

import { Select as ASelect } from 'antd';

function Select({ children, ...props }) {
  return <ASelect {...props}>{children}</ASelect>;
}

function Option({ children, ...props }) {
  return <ASelect.Option {...props}>{children}</ASelect.Option>;
}

Select.Option = Option;

Which is throwing the below error where ever this component is used.

Warning: `children` should be `Select.Option` or `Select.OptGroup` instead of `Option`.

Usage:

<Select defaultValue="option1" style={{ width: 120 }}>
  {options.map((o) => {
    const { key, label } = o;

    return (
      <Select.Option key={key} value={key}>
        {label}
      </Select.Option>
    );
  })}
</Select>

Options Array:

const options = [
  { key: 'option1', label: 'Option 1' },
  { key: 'option2', label: 'Option 2' },
  { key: 'option3', label: 'Option 3' },
];

Live Demo

Answer 1

With the latest version of Antd (5.0.0) you can simply pass options as a prop.

<Select options={options} defaultValue="option1" style={{ width: 120 }} />

Options should now contain value instead of key. ( unique key for every option will be handled by Select component internally )

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
];

children is optional now.

You need to update your base Select implementation as below else you will end up with No Data in the select. ( As you might not use children in every Select instance )

function Select(props) {
  return <ASelect {...props} />;
}

Note: options prop is given more priority over children

Working Code (No console warning)