Reactにおける配列処理(for文・mapメソッド)

はじめに

現在Reactを用いて画面開発を行っているのですが、selectタグの中でoptionを使う際、以下のようにコンポーネントに直接記述してしまうと使い回しができなくなってしまうためpropsで値を渡してやりたいと考えました。

sample.js

<select title="サンプル">
    <option disabled selected>選択してください</option>
    <option value="0">サンプル1</option>
    <option value="1">サンプル2</option>
    <option value="2">サンプル3</option>
    <option value="3">サンプル4</option>
</select>

しかし、optionタグ1つ1つをpropsとして値渡しすると数が多くなってしまうため、propsで配列を受け取りその配列の要素をoptionタグ内に記述して表示してあげよう！と考えました。

①for文での記述

sample.js

list = []

for(let i=0;i<props.opt.length;i++){
    list.push(<option value={i}>{props.opt[i]}</option>
}

return(
    <select title="サンプル">
        {list}
    </select>
)

for文を用いて各配列の要素に変更を加え、それらを別の配列に格納することで実装いたしました。
ちなみに、
opt=["test","sample",...]
といった配列データが親コンポーネントから渡されています。

②mapでの記述

for文でも実装できましたが、JavaScriptのES6以降ではmapメソッドを用いることでスマートに配列処理を行うことができます。

sample.js

var list = props.opt; //見やすくするため、受け取った値を変数に格納

const option = list.map((data,index)=><option value={index}>{data}</option>)

return(
    <select title="サンプル">
        {option}
    </select>
)

こちらのほうが自分は見やすくおしゃれだなと思いました。

おまけ：mapメソッドのコールバック関数について

mapメソッドのコールバック関数の引数は3つあります。

sample.js

配列.map((value,index,array)=> )

value：配列の値
index：配列のインデックス番号
array：現在処理している配列

これらを覚えておくと、配列処理をさらにスマートに行えます！

最後に

ありふれた内容ですが、開発を行う際に引っかかったため自分用の備忘録として書かせていただきました。始めたばかりの初心者ですのでご指摘があればコメントお願いします。