Antd: How to specify the text in the Select's input when my Select.Option is a Component

Question

When using Antd, I found that I cannot specify the text in the Select's input.
Here is my code:

val item = {id: id1, name: name1, key1: value1, key2: value2, key3: value3}
<Select.Option value={item.id}>
    <Card>
        <p>key1: {item.key1}</p>
        <p>key2: {item.key2}</p>
        <p>key3: {item.key3}</p>
    </Card>
</Select.Option>

Now when I select it with Select, I will get a Card component in the input field, which is ugly. I want to show item.name in the input field while show Card component in the dropdown.
Could you guys know how to handle it?

Answer 1

You cannot show item.name in the input field while showing Card component in the dropdown list.

What is showing in input field and dropdown list has to be the same.

Here is how you show the item.name for the input field and dropdown list:

import { Select } from 'antd';
const Option = Select.Option;

<Select>
   <Option key={item.id}>{item.name}</Option>
</Select>