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", …}
...
cities: res.Cities.name
. Is this is correct? orcities: res.Cities
?