ReactのJSX記法でforループを書く方法

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