React-select: Async loadOptions is not loading options

Created on 17 Sep 2017  路  6Comments  路  Source: JedWatson/react-select

Following the github users example, I have the following getCodes function in my loadOptions.
The options returned within the promise are valid post the fetch call. However, the issue is that the dropdown menu doesn't show those options and just says 'Type to search'.

getCodes(input) {
    if (!input) {
      return Promise.resolve({
        options: [
          {label: 'Delhi', value: 'DEL'},
          {label: 'Mumbai', value: 'MUM'}
        ]
      });
    }
    const url =  'http://iatacodes.org/api/v6/autocomplete?query=' + input + '&api_key=' + KEY;

    var proxyUrl = 'https://cors-anywhere.herokuapp.com/';

    return fetch(proxyUrl+url)
      .then((response) => {
       return response.json();
      }).then((json) => {
        var options = [];
        _.each(json['response']['airports'], (airport) => {
          options.push({
            label: airport['name'],
            value: airport['code']
          })
        });
        console.log(options);
        return options;
      });
  }


fromLocChange(o) {
    this.setState({...this.state, fromLoc: o.value});
}

<Select.Async
    name="form-field-name"
    className="selector"
    valueKey="value"
    labelKey="name"
    value={this.state.fromLoc}
    onChange={this.fromLocChange}
    clearable={false}
    loadOptions={this.getCodes}
/>

Output of the console.log above for a search term 'JAI' is:

[
    {label: "Sanganeer", value: "JAI"},
    {label: "Jaisalmer", value: "JSA"}
]

Screenshot of the selector:

image

Most helpful comment

sorry small mistake, should have returned

{options: options}

All 6 comments

sorry small mistake, should have returned

{options: options}

this helps me :). i missed the {options: options} in the example

I dont see anything about returning {options: options} but thank you.

In the latest version actually returning options directly works.

This helped me too, thanks :D

Where to set the options variable? it is saying options is undefined.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

obykoo picture obykoo  路  34Comments

vijayst picture vijayst  路  32Comments

ksmth picture ksmth  路  64Comments

jbranchaud picture jbranchaud  路  32Comments

dantman picture dantman  路  40Comments