[ React ] プルダウンメニュー作成する方法

初投稿！selectタグを使ってプルダウンメニューを実装しました。

完成コード

以下、コードの解説していきます。

sample.jsx

const colors = ["red", "blue", "yellow"];

const PulldownMenu = () => {
  return (
    <>
      <select>
        {colors.map((color) => {
          return <option key={color}>{color}</option>;
        })}
      </select>
    </>
  );
};
export default PulldownMenu;

１. プルダウン内で選択する値を定義する。

sample.jsx

const colors = ["red", "blue", "yellow"];

２. mapメソッドを使用してプルダウンメニューを表示させる。

配列（colors）に定義されている値をoptionタグに入れてループさせます。
mapメソッドは配列に格納されている値を一つずつ取り出してループさせてくれます。

sample.jsx

const colors = ["red", "blue", "yellow"];
const PulldownMenu = () => {
  return (
    <>
      <select>
        {colors.map((color) => {
          return <option key={color}>{color}</option>;
        })}
      </select>
    </>
  );
};
export default PulldownMenu;

注意
optionタグには、一意なkey属性を設定しなければなりません。

以上、Reactでプルダウンメニューを実装する方法でした。