Select value prop

[fraidoonk]

Steps to reproduce

Link to live example: (required)

Steps:

1. Set a state with type of number | string:
   const [category, setCategory] = useState<string | number>("");
2. use the state as value to your select component:
   <Select value={category} disableUnderline onChange={(e) => { setCategory(e.target.value ?? 0); }} > -- map your MenuItems here with values being numerical </Select>
3. Typescript throws error: Type 'string | number' is not assignable to type 'string | undefined'.

Current behavior

Even though the documentation says it is type of '' | any, it does not work

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: select value prop

[brijeshb42]

You can use it like this -

<Select<string | number>
  value={c}
  onChange={(e) => {
    setC(e.target.value ?? 0);
  }}
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

Notice the generic parameter in Select tag.

Feel free to re-open if this doesn't work.