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?
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' }
]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.