Typescript for OptionType is not accepting React component

[cristian-sima]

The code will work as expected, but typescript ruqires me to have labels as strings.

Type '{ value: string; label: Element; }[]' is not assignable to type 'readonly ({ value: string; label: string; } | GroupBase<{ value: string; label: string; }>)[]'.ts(2322)
Select.d.ts(180, 5): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & Omit<Pick<Props<{ value: string; label: string; }, false, GroupBase<{ value: string; label: string; }>>, "value" | "form" | ... 28 more ... | "theme"> & Partial<...> & Partial<...>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'

 var options = [ {value: 0, label: () => (<span>{"All"}</span>)}],

     <Select
            ...
                    options={options}
           ...
                  />

You may also find the online Babel tool quite helpful if you wish to use ES6/ES7 syntax not yet supported by the browser you are using.

[Methuselah96]

The reason the types don't allow it is because the labels need to be strings so that they can be used for accessibility.

[Rall3n]

Additionally if you want to format your options based on provided data, you should either style them using the styling framework or use the formatOptionLabel prop to customize the JSX of the label.

[KesleyDavid]

Good morning @Methuselah96 , my array has all string data, but I get the same error.

const optYear = [
  { value: '2022', label: '2022' },
  { value: '2021', label: '2021' },
  { value: '2020', label: '2020' },
  { value: '2019', label: '2019' },
  { value: '2018', label: '2018' },
 ] 

[Methuselah96]

@cristian-sima @KesleyDavid Can one of you please provide a CodeSandbox with your issue? I am not able to reproduce this.

[HwangTaehyun]

I also have no issue with the latest version

[wegry]

~~@Methuselah96 here's a repro with [email protected].~~

~~https://codesandbox.io/s/hopeful-chaum-v385xj and [email protected].~~

Just noticed that the value prop has to be the same shape as options elements. If value's a string, then options must be a string[]. If options is {value: string; label: string}[], then value must be {value: string; label: string}.

[Methuselah96]

Yes, the value needs to be the same type as one of the options. Last call for reproduction. As far as I can tell, the reports so far have been legitimate type errors.

[VxMxPx]

This needs to be explained better in documentation (preferably with some examples). It's really unintuitive and TS throws error with options type, not with value type.

[yvan99]

i had the same issue just had to remove the value prop

[fzn0x]

isMulti={false} solves my problem

<Select instanceId = "from-currencies-box" styles={customStyles} components={{ Option: optimizeSelect.components.Option, MenuList: optimizeSelect.components.MenuList }} options={(fromCurrencies || []).map((currency) => ({
    value: currency.currency_id,
    label: currency.currency_name,
}))} filterOption={createFilter({ ignoreAccents: false })} isMulti={false} onChange={(e) => setFromCurrency(e.value)} />