Fen Fen - 1 year ago 289
React JSX Question

React-Select, Async Option, no value displayed

import React from 'react';
import Select from 'react-select';

const getOptions = (input) => {
return fetch(`/games/uni/autocomplete/${input}`)
.then((response) => {
return response.json();
}).then((json) => {

return { options: json };

var SearchBar = React.createClass({
render: function() {
return (

loadOptions={getOptions} />

export default SearchBar;

console.log(json) is like:
["EA SPORTS FIFA 16", "FIFA 16 Ultimate Team"]

But the suggeestion values are empty

empty select

Here the state and props of the component Async

props and state of component

Here the official documentation with the example: https://github.com/JedWatson/react-select#async-options-with-promises

What im missing?

Answer Source

In your console.log(json) you print out an array with strings in it, its not an array of objects.

Like the documentation says, you need to format your data like below. Before you are returning it.


const json = [
 { value: 'EASPORTFIFA16', label: 'EA SPORTS FIFA 16' },
 { value: 'FIFA16UltimateTeam', label: 'FIFA 16 Ultimate Team' }