React dropdown fetch from API - reactjs

Question

I want to build "React Dropdown", which will give me options to select user while I type first letters of his name.
Users data is coming from my backend API in JSON format.
// http://localhost:5000/users
{
"users": [
{
"company_id": 1,
"name": "Sally Mae"
},
{
"company_id": 2,
"name": "Johnathan Ives"
},
{
"company_id": 3,
"name": "John Smith"
}
]
}
here's my fetch part, but I can't fetch, but my server is running, this is the code
fetchData = (inputValue, callback) => {
if (!inputValue) {
callback([]);
} else {
setTimeout(() => {
fetch("http://127.0.0.1:5000/users/" + inputValue, {
method: "GET",
})
.then((resp) => {
console.log(resp);
return resp.json()
})
.then((data) => {
const tempArray = [];
data.forEach((users) => {
console.log(tempArray);
tempArray.push({ label: `${users.name}`, value: `${users.name}`});
console.log(tempArray);
});
callback(tempArray);
})
.catch((error) => {
console.log(error, "catch the hoop")
});
});
}
}
appreciate any help !

Answer 1

I think what you misunderstand here is that callback, of your loadOptions prop, is where you wrap your retrieval method.
const getData = (inputValue) =>
fetch('http://127.0.0.1:5000/users/' + inputValue, {
method: 'GET',
})
.then((resp) => resp.json())
.then((data) =>
data.map((user) => ({ label: user.name, value: user.name }))
)
.catch((error) => {
console.log(error, 'catch the hoop');
});
const fetchData = (inputValue, callback) => {
if (!inputValue) {
callback(Promise.resolve([]));
} else {
callback(getData(inputValue));
}
};