React Select - How to show / iterate through data from api call in option instead of hardcoding options?

Question

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 wh

Answer 1

In your return component you can simply pass the cities that is fetched from api as

import Select from 'react-select';
import {availableCities} from '../utils/api.js';

let isLoadingExternally = false;

class App extends React.Component {

    constructor(props) {
    super(props);
    this.state = {
        selectedOption: '',
        clearable: true,
        cities: [],
    } 
}
componentDidMount() {
    isLoadingExternally = true;
    availableCities()
        .then(res => {
            this.setState({
                cities: res.Cities.name
            }, () => {
                isLoadingExternally = false;
            })
            console.log("hello", this.state.cities)
        })
}

handleChange(selectedOption) {
    this.setState({selectedOption});
}
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={'code'}
                isLoading={isLoadingExternally}
                options={this.state.cities}                  
            />
    </div>
)
}
}

There are lots of configurable options available in the docs.

Answer 2

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!

Answer 3

Try this :

renderList() {
 return (this.state.responseData.map(data =>({label:data.Name,value:data.value})))
}

and Call :

 <Select
    options={this.renderList()}
/>