Async Select in react not loading options

Question

I am trying to load options for select field dynamically using React-Select. Here is my method that returns the loadOptions in Select.

 onChange(e)  {
    console.log("Value Printed : " + e);
 if(e.length > 3) {


 new Promise(resolve => {
    setTimeout(() => {           
    const url = `http://localhost:3010/cityNames?name=${e}`;
    fetch(url)
   .then(results => results.json())
   .then(data => {        
       var options = [];    
        options = data;
        console.log("return value from server: " + JSON.stringify(data));
        return {options: data};
   });
    }, 1000);
});

} else {console.log("Enter 3 chars");}
};

But my options aren't displaying.

Here is the render component.

   <AsyncSelect
    isClearable
    loadOptions={this.onChange}
    onInputChange={this.onChange}
   />

The console log shows the correct results. My data variable is:

 [{"label":"Dallas","value":680780}]

Answer 1

added a key prop key={options.length} fixed my issue of not rendering options when options change later. Feel free to use this or similar as a fix as well.

 <AsyncSelect
    key={options.length}
    loadOptions={options}
   />