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}]

Staz · Accepted Answer · 2022-02-14 21:50:39Z

3

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}
   />

answered Feb 14, 2022 at 21:50

Staz

1615 bronze badges

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

Comments

kind user · Accepted Answer · 2019-11-05 21:41:34Z

0

Apparently your component doesn't re-render when the data is fetched. Try to use state instead.

.then((data) => {      
    this.setState({ options: data });
});

And inside render:

<Select
   isClearable
   options={this.state.options}
   onInputChange={this.onChange}
/>

By the way, I really doubt that you have to use Async React Select. I think that the normal one would be enough, with a slight logic change.

Your code should look like:

onChange = (inputValue) => {
  if (inputValue.length > 3) {
      const url = `http://localhost:3010/cityNames?name=${inputValue}`;
        fetch(url)
          .then(results => results.json())
          .then(data => {
             this.setState({
                options: data,
             });
          });
    });
};

edited Nov 5, 2019 at 21:41

answered Nov 5, 2019 at 19:47

kind user

42k8 gold badges69 silver badges78 bronze badges

8 Comments

Shiva Nara Over a year ago

Well, it is not giving any errors in console, neither it shows the options on browser.

Shiva Nara Over a year ago

The console.log shows the values I am getting from the backend, but just it doesnt display

Shiva Nara Over a year ago

Here is the data variable again. [{"label":"Dallas","value":680780}]

kind user Over a year ago

@ShivaNara Replace your async select with normal react select and it should be fine

Shiva Nara Over a year ago

But when I clear my text and enter a new text, it is not fetching the new results?

|

Collectives™ on Stack Overflow

Async Select in react not loading options

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related