CODEWITHSUNDEEP
javascriptreactjsreact-select
enF
enF

Reputation: 59

React-Select, Async Option, no value displayed

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

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?

Upvotes: 4

Views: 3522

Answers (1)

ptorsson
ptorsson

Reputation: 488

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' }
]

Upvotes: 4

Related Questions