はじめに
時間割アプリの開発にあたって、1~10の選択肢が表示されるセレクトボックスを作りました。
その際に記述したコードとその解説をしていきます。
機能の詳細
- 完成時の画面表示
- 実装する機能
1〜10までの選択肢を自動的に作り出してSelectBoxに表示する - 最終的なコード
ClassNumberコンポーネントはstyled-componentによって<select>タグと置き換えられています。
<ClassNumber>
{Array.from({ length: 10 }, (_, i) => (
<option key={i + 1}>{i + 1}</option>
))}
</ClassNumber>
解説
Array.from()を使って10個の数字（1〜10）を選択肢として作成
1.Array.from({ length: 10 })で長さ10の配列を作成
この配列の各要素は未定義の値だが、(_, i)というコールバック関数*が渡されており、iはインデックスを表しています（0〜9の数）。
*何らかのルーチンやアクションを完了させる関数
{Array.from({ length: 10 }, (_, i) => ())}
2.このインデックスiに 1 を加えて（i + 1）、<option>タグの値として使用
つまり、1から10までの数字を表示する<option>タグを10個作成する。
<option key={i + 1}>{i + 1}</option>
3.各optionタグには、key={i + 1}という一意のキーが設定されている
Reactでは同じ要素をループで繰り返しレンダリングするときにキーが必要。
<ClassNumber>
{Array.from({ length: 10 }, (_, i) => (
<option key={i + 1}>{i + 1}</option>
))}
</ClassNumber>
さいごに
時間割アプリで使用した他の機能はこちら