React.jsの勉強中にちょっとハマったのでメモ。

タイトルのとおり、JSXでfor文のようなループ処理を書く方法を紹介する。

map関数を使ってループする

Reactコンポーネントのrender関数を例に、3回ループする処理を書いてみた。

01
02
03
04
05
06
07
08
09
10
11
12
13
render() {
    return(
        <div>
            {
                Array(3).fill('test').map((val, i) => {
                    return (
                        <div>{val}, {i}</div>
                    );
                })
            }
        </div>
    );
}

上記の出力結果は以下のとおりとなる。

1
2
3
test, 0
test, 1
test, 2

2重ループ処理

for文をネストした多重ループ処理も、マップ関数を使ってJSXでも同様の処理を行うことができる。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
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関数の実行結果は以下のとおりとなる。

1
2
3
4
5
6
7
8
9
0, 0
0, 1
0, 2
1, 0
1, 1
1, 2
2, 0
2, 1
2, 2