React.jsの勉強中にちょっとハマったのでメモ。
タイトルのとおり、JSXでfor文のようなループ処理を書く方法を紹介する。
map関数を使ってループする
Reactコンポーネントのrender関数を例に、3回ループする処理を書いてみた。
render() { return( <div> { Array(3).fill('test').map((val, i) => { return ( <div>{val}, {i}</div> ); }) } </div> ); }
上記の出力結果は以下のとおりとなる。
test, 0 test, 1 test, 2
2重ループ処理
for文をネストした多重ループ処理も、マップ関数を使ってJSXでも同様の処理を行うことができる。
render() { return( <div> { Array(3).fill('test').map((val, i) => { return ( Array(3).fill(0).map((val2, j) => { return ( <div> {i}, {j} </div> ); }) ); }) } </div> ); }
このrender関数の実行結果は以下のとおりとなる。
0, 0 0, 1 0, 2 1, 0 1, 1 1, 2 2, 0 2, 1 2, 2