React Select - How to show / iterate through data from api call in option instead of hardcoding options?
The issue here comes from the objects in your array. react-select
needs an array of objects with following keys in order to understand it: value
and label
.
So, in render, you could replace
let options = this.state.cities.map(function (city) {
return city.name;
})
by, for example,
let options = this.state.cities.map(function (city) {
return { value: city.countryCode, label: city.name };
})
or, like pritesh pointed out, simply tell react-select
what keys to use like
render () {
return (
<div>
<Select
name="form-field-name"
value={this.state.value}
onChange={this.handleChange}
clearable={this.state.clearable}
searchable={this.state.searchable}
labelKey='name'
valueKey='countryCode'
options={this.state.cities}
/>
</div>
)
}
Hope this helps you out!