React-Select, Async Option, no value displayed

Question

import React from 'react';
import Select from 'react-select';
require("../node_modules/react-select/dist/react-select.css");   

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

      console.log(json)
      return { options: json };
    });
}


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

            <Select.Async
              name="form-field-name"
              loadOptions={getOptions} />   
    )
  }
});

export default SearchBar;

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

But the suggeestion values are empty

Here the state and props of the component Async

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

What im missing?

ptorsson ptorsson · Accepted Answer · 2016-09-17T17:34:03

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.

Example

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

React-Select, Async Option, no value displayed

1 Answers