React-Select loadOptions not working

920 views Asked by At

I'm trying to use the React-Virtualized-Select with an async API call to load the options, but it's never completing the loadOptions method. Here is the full file:

const VirtualizedSelect = window["react-virtualized-select"].default;

class SearchElement extends React.Component {
  constructor (props) {
    super(props);

    this.getPlayers = this.getPlayers.bind(this);

  }

  getPlayers(input) {
      fetch(`/api/master/getAllPlayers`)
          .then(function(response){
              return response.json();
          }).then(function(json){
              var arrLength = json.length;
              var objArray = [];
              for (var i = 0; i < arrLength; i++){
                  var o = {};
                  o.label = json[i][0];
                  o.value = json[i][1];
                  objArray.push(o);
              }
              console.log(objArray);
              return {options: objArray};
          });
  };

  render () {

    return (
      <VirtualizedSelect 
        async 
        loadOptions={this.getPlayers}
      />
    )
  }
}


var searchElement = React.createElement(SearchElement);

ReactDOM.render(searchElement, document.getElementById('search'));

The second callback in getPlayers is to convert the array of arrays into an array of objects; the console.log prints an array as follows:

0:
Object
  label:"harribe02"
  value:"Harris"
1:
Object
  label:"harribi01"
  value:"Bill"

But then the spinner in the search bar hangs, and never displays the options past 'Loading...'. Not sure how to better send the data.

0

There are 0 answers