CODEWITHSUNDEEP
reactjsantd
Ukonn Ra
Ukonn Ra

Reputation: 754

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

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?

Upvotes: 2

Views: 3840

Answers (2)

Maxim Shmarev
Maxim Shmarev

Reputation: 1

You can do it by using optionLabelProp="label":

<Select optionLabelProp="label">
 // your Select.Option
</Select>

Upvotes: 0

William Shea
William Shea

Reputation: 378

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>

Upvotes: 1

Related Questions