Want to get options on inputValue change in react select

Question

I have a react-select component and I want to add a functionality so that once someone enters something in react-select there should be an api request to get the items related to the entered keyword, how can I this way

Answer 1

You can do this without any API calls, just use the filter method to filter your options

Answer 2

You should try to view AsyncSelect from "react-select/async" Then create a function in the component to load the options from the API, the function should accept an input string and a callback and should make an API call based on the input string. Things like this

const loadOptions = (inputValue, callback) => {
    // api call here
    fetch('your-api-url?${inputValue}')
      .then(response => response.json())
      .then(data => {
         // do your work here
         const options = //transform data here
         callback(options)
      });
};

Then pass the loadOptions function into the loadOptions property in your component

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