[React] Material UI(MUI)でドロップダウンを作る2つの方法

みなさんこんにちは、
今回はReactのライブラリ、MUIを使ったドロップダウンの書き方について
<TextField>と<Autocomplete>の2種類の方法をメモ程度に記します。
あくまでサンプルなので内容は適宜変更してください。

表示するデータは以下を前提として進めます。

const selectBox = [
  { label: "label1", value: "value1" },
  { label: "label2", value: "value2" },
  { label: "label3", value: "value3" }
];

1. TextFieldを使った書き方

import { TextField, MenuItem } from "@mui/material";

<TextField id="selectbox" 
  label="初期設定のラベル"
  select  // ← このselectが要
  fullWidth
>
// 以下セレクトの内容を一つ一つMenuItemに格納
  {selectBox.map((item, index) => (
    <MenuItem key={index} value={item.value}>
      {item.label}
    </MenuItem>
))}
</TextField>

1. Autocompleteを使った書き方

import { TextField, Autocomplete } from "@mui/material";

<Autocomplete
  id="selectBox"
  name="AutoComplete で作ったプルダウン"
  fullWidth
  options={selectBox} // ← このoptionsの内容が要
  renderInput={(params) => <TextField {...params} label="初期設定のラベル"/> }
  value={selectBox.label}
  // 以下ドロップダウンに必要な要素を記述 
  renderOption={(props, option) => (
    <li {...props} key={option.value}>{option.label}</li>
  )}
  // これがないと警告が出るらしい
  isOptionEqualToValue={(option, value) =>
    value.value === "" || option.value === value.value
  }
/>

上記2種類のコードを記載したCodeSandBoxを以下に載せておきます。

最後に

今回はドロップダウンの内容についてでした。
正解はいろいろあるので必要に応じて書き換えていくのがよいのでしょうか…
おそらく他にも書き方は何通りもあると思うので他の書き方も学んでいきたいです。

ドロップダウン、プルダウン、セレクトボックスいろんな呼び方があってどれが正解かいまいち難しい…