AsyncSelect Component

AsyncSelect.js

import React, { useCallback } from "react";
import debounce from "lodash/debounce";
import AsyncSelect from "react-select/async";
import axios from "axios";

const App = (props) => {
  const options = [
    { label: "Option 1", value: 1 },
    { label: "Option 2", value: 2 },
    { label: "Option 3", value: 3 }
  ];

  const getAsyncOptions = (inputText) => {
    const candidate = inputText.toLowerCase();
    const byLabel = ({ label }) => label.toLowerCase().includes(candidate);
    // remove this line and uncomment below to try with your impementation
    return new Promise((resolve) =>
      setTimeout(resolve, 1, options.filter(byLabel))
    );

    /* 
    return axios
      .get(`/v1/user?username=${inputText}`)
      .then((response) => {
        return response.data.map((user) => ({
          value: user.id,
          label: user.username,
        }));
      })
      .catch((error) => {
        alert(JSON.stringify(error));
      });
      */
  };

  const loadOptions = useCallback(
    debounce((inputText, callback) => {
      getAsyncOptions(inputText).then((options) => callback(options));
    }, 1000),
    []
  );

  return (
    <AsyncSelect
      // cacheOptions
      loadOptions={loadOptions}
      defaultValue={[]}
      isMulti
      isClearable
      defaultOptions={[]}
    />
  );
};

export default App;