はじめに
現在Reactを用いて画面開発を行っているのですが、selectタグの中でoptionを使う際、以下のようにコンポーネントに直接記述してしまうと使い回しができなくなってしまうためpropsで値を渡してやりたいと考えました。
sample.js
<selecttitle="サンプル"><optiondisabledselected>選択してください</option>
<optionvalue="0">サンプル1</option>
<optionvalue="1">サンプル2</option>
<optionvalue="2">サンプル3</option>
<optionvalue="3">サンプル4</option>
</select>
しかし、optionタグ1つ1つをpropsとして値渡しすると数が多くなってしまうため、propsで配列を受け取りその配列の要素をoptionタグ内に記述して表示してあげよう！と考えました。
①for文での記述
sample.js
list=[]for(leti=0;i<props.opt.length;i++){list.push(<optionvalue={i}>{props.opt[i]}</option>
}return(<selecttitle="サンプル">{list}</select>
)for文を用いて各配列の要素に変更を加え、それらを別の配列に格納することで実装いたしました。
ちなみに、opt=["test","sample",...]
といった配列データが親コンポーネントから渡されています。
②mapでの記述
for文でも実装できましたが、JavaScriptのES6以降ではmapメソッドを用いることでスマートに配列処理を行うことができます。
sample.js
varlist=props.opt;//見やすくするため、受け取った値を変数に格納constoption=list.map((data,index)=><optionvalue={index}>{data}</option>)
return(<selecttitle="サンプル">{option}</select>
)こちらのほうが自分は見やすくおしゃれだなと思いました。
おまけ：mapメソッドのコールバック関数について
mapメソッドのコールバック関数の引数は3つあります。
sample.js
配列.map((value,index,array)=>)value：配列の値
index：配列のインデックス番号
array：現在処理している配列
これらを覚えておくと、配列処理をさらにスマートに行えます！
最後に
ありふれた内容ですが、開発を行う際に引っかかったため自分用の備忘録として書かせていただきました。始めたばかりの初心者ですのでご指摘があればコメントお願いします。