I am trying to get some data from mongodb to the select option then i can filter them then select an option but it doesn't display any data from the API

 const [selectedValue, setSelectedValue] = useState(null);
 const [inputValue, setValue] = useState('');

  
    const handleUser = value => {
       setSelectedValue(value);
    }
  
    const handleInputChange = value => {
      setValue(value);
    };
const loadOptions = async (inputValue) => {
    return await axios.get('/user/'   inputValue).then(res => res.json());
  };
 <AsyncSelect
       cacheOptions
       defaultOptions
       value={selectedValue}
       loadOptions={loadOptions}
       onInputChange={handleInputChange}
       onChange={handleUser}
  />

am i missing something with my code ?

CodePudding user response：

Function that returns a promise, which is the set of options to be used once the promise resolves.

for async:

const getData = async (inputValue) => {
  let res = await axios.get("https://jsonplaceholder.typicode.com/users");
  return res.data;
};
const getData2 = () => {
  axios
    .get("https://jsonplaceholder.typicode.com/users")
    .then((res) => res.data);
};
const loadOptions = (inputValue) => {
  return getData(inputValue).then((res) => {
    return res
      .filter((r) => r.name.toLowerCase().startsWith(inputValue))
      .map((t) => ({ value: t.id, label: t.name }));
  });
};

export const RenderSelect = () => {
  return <AsyncSelect cacheOptions defaultOptions loadOptions={loadOptions} />;

};
}