CODEWITHSUNDEEP
reactjstypescripttypescript-typingsreact-select
sbuck89
sbuck89

Reputation: 133

react-select typescript issue - Generic type 'ValueType' requires 2 type argument(s).ts(2314)

I am trying to utilize react-select and have the following code:

import React, {useState} from 'react';
import LanguageChange from '../../../Icons/LanguageChange';
import Select, { ValueType } from 'react-select';

type OptionType = {
    value: string;
    label: string;
  };


export const LanguageSelector = () => {
    const languageOptions: OptionType[] = [
        { value: 'English', label: 'EN' },
        { value: 'German', label: 'DE' },
        { value: 'French', label: 'FR' },
      ];
    const [selectedOption, setSelectedOption] = useState<ValueType<OptionType>>(languageOptions[0]);
    const handleChange = (option: ValueType<OptionType>) => {
    setSelectedOption(option);
  };

    return (
        <LanguageChange>
            <Select
                value={selectedOption}
                onChange={setSelectedOption}
                options={languageOptions}
            />
        </LanguageChange>
    )
}

But I keep getting the following error: (alias) type ValueType<OptionType extends OptionTypeBase, IsMulti extends boolean> = IsMulti extends true ? OptionsType : OptionType | null import ValueType Generic type 'ValueType' requires 2 type argument(s).ts(2314)

Any idea what I'm missing here?

Upvotes: 8

Views: 9321

Answers (2)

rdr20
rdr20

Reputation: 196

Update your onChange function to accept params like this:

onChange: (value: ValueType<OptionType, IsMulti>, actionMeta: ActionMeta<OptionType>) => void;

Upvotes: 0

Linda Paiste
Linda Paiste

Reputation: 42288

ValueType requires two generics: the OptionType which you have provided and IsMulti which is either true or false. IsMulti determines whether or not it is an array. If you have an OptionType with {value: string}, the ValueType if it's a multiple select should be string[] whereas for a single select it would be string.

In your case you have a single select so you can use ValueType<OptionType, false>. But you can also just use string because you already know that the value type of your options is string so there is no need to work backwards.

Source Code

Upvotes: 14

Related Questions