How to make api in react select

Question

This is my code

My state

this.state = {
    loading: true,
    weather: [],
    cityName: [],
    selectedOption: '',

}

My call api

const getAPIcityName = Axios.get('http://dataservice.accuweather.com/locations/v1/topcities/100?').then((res) => {
        console.log('res' + res);
        this.setState({ cityName: res.AdministrativeArea.LocalizedName });
    }, (error) => {
        console.log('error', error)
    });
}

And here i wont to do the Select the name of the city

handleChange(selectedOption) {
    this.setState({ selectedOption });
    console.log(selectedOption);
}

render() {
    let options = this.state.cityName.map((cityName) => {
        return cityName.AdministrativeArea.LocalizedName;
    })

    return (
        <div class="container">

            <h1 for="Search">Search</h1>
            <form>

                <Select
                    name="form-field-name"
                    value={this.state.value}
                    onChange={this.handleChange}
                    options={options}
                />

And here it works

{/* <select class="custom-select custom-select-lg mb-3">
    {this.state.cityName.map(cityName => <option key={cityName.Key}>{cityName.AdministrativeArea.LocalizedName}</option>)}
</select> */}

And this is the Error

Unhandled Rejection (TypeError): Cannot read property 'LocalizedName' of undefined

cityName.AdministrativeArea is undefined, that's why you are getting that error. you need to initialize it in your constructor or await your API call. — Bill F
– Bill F, Commented Sep 25, 2019 at 22:02

ravibagul91 · Accepted Answer · 2019-09-26 02:39:54Z

1

If my understanding is correct, you are using react-select.

react-select needs options array in the following format,

const options = [
  { value: '', label: '' },
  { value: '', label: '' },
  ...
]

Your options should be in above format.

As your data is coming from an API, you need to first check if you have data in state and then only iterate over the state to get options

let options = [];

if(this.state.cityName && this.state.cityName.length > 0){
   options = this.state.cityName.map((cityName) => {
        return {value: cityName.AdministrativeArea.LocalizedName, label: cityName.AdministrativeArea.LocalizedName};
    })
}

answered Sep 26, 2019 at 2:39

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make api in react select

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related