Hi guys,
I am just working with react-select and want to fill an asynchronous select with data I fetch through an API. The data are fetched. The problem is that the data I need is needed in the response and at the moment it seems that I cannot set data structures like “response.data.name”. This gives me an error.
Here’s the fetching coding:
const loadOptions = (inputValue) => {
console.log(inputValue)
return fetch('APIURL', {
method: 'POST',
body: JSON.stringify({
"entity_name": inputValue
}),
headers: {
'Authorization': 'dummy'
}
}).then(response => response.json())
};
and here my select
<AsyncSelect
cacheOptions
defaultOptions
value={selectedValue}
getOptionLabel={e => e.name}
getOptionValue={e => e.entity_id}
loadOptions={loadOptions}
onInputChange={handleInputChange}
onChange={handleChange}
/>
The structure of my response is the following:
{
"interface": "Get Entities",
"data": [
{
"entity_id": "28",
"name": "University of Andorra",
"url": "uda.ad",
"urlname": "udaad",
"category": "1",
"creation": "0000-00-00 00:00:00"
},
{
"entity_id": "29",
"name": "Abu Dhabi University",
"url": "adu.ac.ae",
"urlname": "aduacae",
"category": "1",
"creation": "0000-00-00 00:00:00"
},
and I just want the nested data-object considered. How can I solve this?
Thanks in advance for your help.