React-Select loadOptions is not working

477 Views Asked by At

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

0

There are 0 best solutions below