I am using react-select and I don't want to hard code the options which should be displayed, but options is data I am fetching from an api. I can't really find anything and what I was trying to do doesn't work as nothing gets displayed. Anyone knows? Thanks!!!
api.js:
export function availableCities() {
return axios.get('/cities').then(function (response) {
return response.data;
})
}
Component:
import Select from 'react-select';
import {availableCities} from '../utils/api.js';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedOption: '',
clearable: true,
cities: [],
}
}
componentDidMount() {
availableCities()
.then(res => {
this.setState({
cities: res.Cities.name
})
console.log("hello", this.state.cities)
})
}
handleChange(selectedOption) {
this.setState({selectedOption});
}
render(){
let options = this.state.cities.map(function (city) {
return city.name;
})
return (
<div>
<Select
name="form-field-name"
value={this.state.value}
onChange={this.handleChange}
clearable={this.state.clearable}
searchable={this.state.searchable}
options={options}
/>
</div>
)
}
}
Data( this.state.cities is an array of objects and looks like:
{code: "LTS", name: "Altus", countryCode: "US", countryName: "United States", regionName: "North America", …}
...
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!
Try this :
renderList() {
return (this.state.responseData.map(data =>({label:data.Name,value:data.value})))
}
and Call :
<Select
options={this.renderList()}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With