Typescript error for options prop

[brunolsantos]

I'm using react-select v5 and i'm getting a typescript error when i send my options parameter.

Types.ts file

export interface DropdownFilterProps {
  dropdowns: [
    {
      options: DropdownOption[];
      id: string;
      setSelected?: Function;
    }
  ];
}

export interface DropdownOption {
  value: string;
  label: string;
}

Select.tsx

import React, { useState, useEffect } from 'react';
import Select from 'react-select';
import { DropdownFilterProps } from './types';

export function DropdownFilter({ dropdowns }: DropdownFilterProps) {
  const [selectedItems, setSelectedItems] = useState<any>(null);
  useEffect(() => {
    ...
  };
  const setSelectedItemToState = (selectedDropdownOption: any) => {
    ...
  };

  return (
    <div>
        {dropdowns &&
          dropdowns.map((item) => {
            return (
              <Select
                value={() => getSelectedValue(item.id)}
                options={item.options}
                onChange={(selectedOption) => {
                  setSelectedItemToState(selectedOption);
                }}
              />
            );
          })}
    </div>
  );
}

And i get below error for options prop

Array of options that populate the select menu

Type 'DropdownOption[]' is not assignable to type 'readonly ((() => any) | GroupBase<() => any>)[]'.
  Type 'DropdownOption' is not assignable to type '(() => any) | GroupBase<() => any>'.
    Property 'options' is missing in type 'DropdownOption' but required in type 'GroupBase<() => any>'.ts(2322)
[types.d.ts(5, 14): ]()'options' is declared here.
[Select.d.ts(180, 5): ]()The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & Omit<Pick<Props<() => any, false, GroupBase<() => any>>, "form" | "className" | "aria-errormessage" | "aria-invalid" | ... 26 more ... | "value"> & Partial<...> & Partial<...>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'

Can someone please add an example of typescript usage for react-select?

Package.json

"@types/react-dom": "^17.0.10",
"@types/styled-components": "^5.1.17",
"@typescript-eslint/eslint-plugin": "4.28.0",
"@typescript-eslint/parser": "^5.2.0",
"babel-plugin-styled-components": "^2.0.2",
"esbuild": "^0.13.12",
"react": "^17.0.2",
"react-docgen-typescript": "^2.1.1",
"react-dom": "^17.0.2",
"react-html-parser": "^2.0.2",
"react-responsive": "^9.0.0-beta.5",
"react-select": "^5.2.2",
"typescript": "^4.4.4"

[Methuselah96]

That's because the value prop needs to take an option not a function. Maybe this is what you're trying to do? Note that getSelectedValue would need to return a DropdownOption.

        {dropdowns &&
          dropdowns.map((item) => {
            return (
              <Select
-               value={() => getSelectedValue(item.id)}
+               value={getSelectedValue(item.id)}
                options={item.options}
                onChange={(selectedOption) => {
                  setSelectedItemToState(selectedOption);
                }}
              />
            );
          })}

[brunolsantos]

Thanks @Methuselah96 i changed the value prop as you said and it is working now :)