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.