I have my state with only id's to load the select

//ComponentDidMount method
let countries_data = await axios.get('/api/v1/countries/');
countries_data.data.map((data) => {
  countries.push(<Option key={data.id}>{data.name}</Option>);
});
//My Options are a Option Component

//Render method
<Select 
 showSearch
 placeholder={'Country'}
 size={"large"}
 value={this.state.country_id} //Should show the text from option selected
 onChange={this.onChangeCountry}
 filterOption={(input, option) =>
     option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
     {countries}
 </Select>

The main problem here is I set the value option with a integer the Select will show the number, like 27, 40 but no the country label from the option like Country A, Country B, etc. My problem here is how to set a value setting the value as integer and show me the Option selected from my country array?

I have my state with only id's to load the select

//ComponentDidMount method
let countries_data = await axios.get('/api/v1/countries/');
countries_data.data.map((data) => {
  countries.push(<Option key={data.id}>{data.name}</Option>);
});
//My Options are a Option Component

//Render method
<Select 
 showSearch
 placeholder={'Country'}
 size={"large"}
 value={this.state.country_id} //Should show the text from option selected
 onChange={this.onChangeCountry}
 filterOption={(input, option) =>
     option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
     {countries}
 </Select>

The main problem here is I set the value option with a integer the Select will show the number, like 27, 40 but no the country label from the option like Country A, Country B, etc. My problem here is how to set a value setting the value as integer and show me the Option selected from my country array?

• javascript
• select
• antd

Share Improve this question Follow asked Sep 5, 2019 at 21:35 drkpkgdrkpkg 7311 gold badge11 silver badge1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 0

You need to add the value attribute to your <Option />

countries_data.data.map((data) => {
  countries.push(<Option key={data.id} value={data.id}> {data.name} </Option>);
//                                     ^^^^^^^^^^^^^^^
});

Refer to Select.Option API, the property title sets the title of Select after selecting this option.

Moreover, why would you use a map without a return value? Use forEach for this case.

countries_data.data.forEach((data) => {
  countries.push(<Option key={data.id} value={data.name} title={data.name}>{data.name}</Option>);
});