【TypeScript】ReactでMaterialUIのセレクトボックスに配列値を表示する方法ご紹介。

TypeScript

2021.11.23

今回の記事はTypeScriptベースのReactでMaterialUIを使ってセレクトボックスに配列値を表示する方法をご紹介する記事です。初心者にも分かりやすいように記載していくので、是非参考にしてみてください。

TypeScriptのReactプロジェクト作成
ReactにMaterialUIをインストール
MaterialUIのセレクトボックスに配列値を表示

TypeScriptのReactプロジェクト作成

node等がインストールされてない方はインストールして下さい。その前提で話を進めます。

npx create-react-app sample --template typescript

まずは上記で「sample」プロジェクトを作成します。

cd sample
npm start

これでローカルサーバが立ち上がって初期画面が表示できます。

次にMaterialUIをインストールします。

ReactにMaterialUIをインストール

一旦ローカルサーバを止めます。「Ctrl + C」

npm install @mui/material @mui/styles @emotion/react @emotion/styled --save

上記コマンドでMaterialUIをインストールします。これでインストールは完了です。

ではいよいよ本題のセレクトボックスを使って配列値を表示してみましょう。

MaterialUIのセレクトボックスに配列値を表示

import React from 'react';
import Box from '@mui/material/Box';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

type Props = {
  lists: string[]
}

const SelectBox1 = (props:Props) => {
  return (
    <div>
      セレクトボックス
      <Box>
        <FormControl fullWidth>
          <Select>
            {props.lists.map((item) => (
              <MenuItem>
              {item}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </Box>
    </div>
  );
}

const lists:string[] = ["1","2","3"]

const App: React.VFC = () => {
  return (
    <div>
      <SelectBox1 lists={lists} />
    </div>
  );
}

export default App;

解説していきます。

セレクトボックスのコンポーネントは下記です。

const SelectBox1 = (props:Props) => {
  return (
    <div>
      セレクトボックス
      <Box>
        <FormControl fullWidth>
          <Select>
            {props.lists.map((item) => (
              <MenuItem>
              {item}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </Box>
    </div>
  );
}

下記のメニューボックスのところをmap関数で配列値を全て出力しています。

          <Select>
            {props.lists.map((item) => (
              <MenuItem>
              {item}
              </MenuItem>
            ))}
          </Select>

実際に出力している配列は「lists」の中身で、下記でJSXにレンダリングしているという具合です。

<SelectBox1 lists={lists} />

再度アプリを立ち上げると下記表示ができています。配列値を変えると中身も変わっています。

では今回の記事は以上です。ほかにも多数のTypeScript関連の記事を記載しているので是非興味あればサイト内見ていってください。