[Select] TypeScript example for Object values

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I would like to use an object as a value for my select field with TypeScript, without having to use IDs and going back and forth between index, string and object conversions.

I got a working example, but TypeScript still complains about incorrect typings.

Help would be greatly appreciated.

Examples 🌈

I couldn't find a decent template for MUI-5 + typescript, but here's the code example:

type ItemType = {
  myStr: string,
  myNbr: number,
  myBool: boolean
};

const items: ItemType[] = [
  {
    myStr: "myStr1",
    myNbr: 1,
    myBool: false
  },
  {
    myStr: "myStr2",
    myNbr: 2,
    myBool: true
  }
];

export default function Test() {
  const [selectedItem, setSelectedItem] =
    React.useState<ItemType | undefined>(undefined);

  return (
    <Select
      value={selectedItem}
      onChange={(selectEvent) => setSelectedItem(selectEvent.target.value)}
    >
      <MenuItem value={undefined}>All</MenuItem>
      {items.map((item) => (
        <MenuItem key={item.myStr} value={item}>{item.myStr}</MenuItem>
      ))}
    </Select>
  );
}

I'm getting errors, because onChange is expecting string | ItemType instead of undefined | ItemType and same error for MenuItem value.

Motivation 🔦

No response

Start with the Select and MenuItem typings in the provided MUI 5 TypeScript example, focusing on the value and onChange types shown in the issue. Check that the example type-checks when selectedItem can be undefined or an ItemType, and that object values work without conversion.