Reactでセレクトボックスを実装する方法【コピペ→書き換えるだけ】

序

Reactでセレクトボックスを実装する方法です。
調べて時間がかかったので、自分用も兼ねて記事にしました。

サンプルコード(そのままコピペ)

App.js

export const App = (props) => {
  const arr = ["りんご","みかん","ぶどう","いちご"]
  let txt = "みかん"
　function method(data){
    txt = data
  }
  return (
    <>
      <select
        onChange={(e) => method(e.target.value)}
        value="0">
        {arr().map((data, index) => {
          return <option value={data}>{index + 1}. {data}</option>;
          //選択肢はこんなかんじ
            // 1.りんご
            // 2.みかん
            // 3.ぶどう
            // 4.いちご
        })}
      </select>
    </>
  );
}

セレクトボックスによってtxt変数の値を変更するコードです。

少し解説(急がない人向け)

selectタグ

App.js

<select
  onChange={(e) => method(e.target.value)}> 
  value="0"  // 初期表示(selected)

まず普通のselectです。
onChangeはselectに変化があったら処理を実行するというものです。今回はmethod()を呼び出します。
valueは初期表示を指定することができます。optionタグを使ったときに使える「selected」です。

App.js

<select>
 <option>りんご</option>
 <option selected>みかん</option>  {/* ←これ */}
 <option>ぶどう</option>
 <option>いちご</option>
</select>

optionタグ

App.js

{arr().map((data, index) => {
  return <option value={data}>{index+1}. {data}</option>;
})}

今回はmapを使ってoptionタグを繰り返すようプログラムしてみました。optionタグを量産してもよいのですが、あんまりカッコよくない＋Reactのスキルを上げたかったのでmap使ってみました。

dataとindexが繰り返しごとに違う値を持ちます。初回は[data→"りんご", index→0]、次回は[data→"みかん", index→1]という具合です。

りんごは「1.」で表示させたかったので、0からはじまるindexは+1して表示させています

arrがオブジェクトの時はこんな感じで指定します

arr = [{name: "りんご", price: 100},{name: "みかん", price: 150}]
{arr().map((data, index) => {
  return <option value={data}>{index}. {data.name}:{data.price}円</option>;
  // 選択肢はこんなかんじ
    // 1.りんご:100円
    // 2.みかん:150円
})}

終

Reactで書いた時のコードですが、ここらへんの本質はJavaScriptのため、細かい記法を合わせればどのJS技術でも使えるコードになっています。

「じゃあfor文でよくね？」という声もある気がしますが、map、慣れましょう。慣れると便利です、多分。