React-select Dynamic Dropdown With Async Options Loaded As User Is Typing

I'm new to React and I'm trying to merge 2 different features. A dynamic form where you can add and/or remove inputs AND one with async react-select where you can start typing a wo

Solution 1:

The documentation is very helpful here. The onChange prop takes a method with a specific signature.

constonChange = (option, {action}) => {
  /* The `option` value will be different, based on the Select type
   * and the action, being one of `option`, an array of `option`s
   * (in the instance of a multiselect), `null` (typical when clearing
   * an option), or `undefined`.
   * What you actually get will depend on the `action` the select passes,
   * being one of:
   * - 'select-option'
   * - 'deselect-option'
   * - 'remove-value'
   * - 'pop-value'
   * - 'set-value'
   * - 'clear'
   * - 'create-option'
   */// example uses the `useState` hook defined earlierswitch (action) {
     case'select-option',
     case'remove-value',
     case'clear':
       setColor(option);
       break;
     default:
       // I'm not worried about other actions right nowbreak;
   }
};

Remember that React-Select treats value as the entire option object, not just the option value you define in getOptionValue. If you're looking at setting a true form 'value', you'll probably wrap Select in some way to handle that.

React-Select is incredibly powerful, and incredibly complex. The documentation is your friend here. I find it helpful to play around in CodeSandbox, when trying out features I don't fully understand yet.