How do I define an onChange handler for React-Select in typescript

Question

I can't get the onchange function typing correct. I created a handler function but typescript keeps complaining about type mismatch.

My function:

private handleChange(options: Array<{label: string, value: number}>) {
}

Typescript error:

src/questionnaire-elements/AssessmentFactorSearch.tsx (43,9): Type '{ ref: "select"; name: string; backspaceToRemoveMessage: ""; value: { label: string; value: IAsse...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Async<OptionValues>> & Readonly<{ children?: React...'. Type '{ ref: "select"; name: string; backspaceToRemoveMessage: ""; value: { label: string; value: IAsse...' is not assignable to type 'Readonly<ReactAsyncSelectProps<OptionValues>>'. Types of property 'onChange' are incompatible. Type '(options: { label: string; value: number; }[]) => void' is not assignable to type 'OnChangeHandler<OptionValues, Option<OptionValues> | Option<OptionValues>[]> | undefined'. Type '(options: { label: string; value: number; }[]) => void' is not assignable to type 'OnChangeHandler<OptionValues, Option<OptionValues> | Option<OptionValues>[]>'. (2322)

How do I type the onchange method?

Answer 1

Based on https://github.com/JedWatson/react-select/issues/2902, just write your handler like this:

// define your option type
type MyOption = {label: string, value: number}

// ...

  // define your onChange handler:
  private handleChange = (selected?: MyOption | MyOption[] | null) => {
    /** Code **/
  }

Take note of the part MyOption | MyOption[] | null, which matches the same structure as the definition of onChange in the react-select library. Just make your own MyOption type.

Another example in that issue thread also shows that you can pass the function inline, and in that case the type of the handler parameter is inferred automatically:

<Select
  onChange={selectedOption /* type is automatically inferred here */ => {
    if (Array.isArray(selectedOption)) {
      throw new Error("Unexpected type passed to ReactSelect onChange handler");
    }

    doSomethingWithSelectedValue(selectedOption.value);
  }}
  ...
/>

Answer 2

as for react-select ˆ3.1.0 the code below should work:

import {ValueType, ActionMeta} from 'react-select';

type MyOptionType = { label: string, value: number }

type OnChange = (value: ValueType<MyOptionType>, actionMeta: ActionMeta<MyOptionType>) => void;

Answer 3

2021 answer:

1. Don't use the @types/react-select lib, it's been deprecated
2. onChange handler

Handler:

const addTagHandler = (tags: OnChangeValue<TagOptionType, true>) => {
    if (tags) {
      setTags((tags as TagOptionType[]).map((tag: TagOptionType) => tag.value));
    }
  };

Where:

1. boolean true refers to isMulti (are there multiple elements, or single)
2. Where TagOptionType looks

As follows:

type TagOptionType = { label: string, value: string }