Reactチュートリアルで使用した二重ループ

Reactチュートリアルで作るマルバツゲームの盤面を二重ループで作成する

自力だと良い方法が思い浮かばず色々調べた結果、いい方法を見つけたのでメモ

index.js

class Board extends React.Component {
    renderSquare(i) {
        return (
            <Square 
                value={this.props.squares[i]} 
                onClick={() => this.props.handleClick(i)}
            />
        );
    }

    createSquares() {
        let rows = [];
        for(let i = 0; i < 3; i++){
            let squares = [];
            for(let j = 0; j < 3; j++){
                squares.push(this.renderSquare(i*3+j));
            }
            rows.push(<div classname="board-row">{squares}</div>);
        }
        return rows;
    }

    render(){
        return(
            <div>
                {this.createSquares()}
            </div>
        );
    }
}

こちらを参考にしました。

ポイントは以下の2つ

• DOMは配列にプッシュする
• 2つの配列を使用する

一つの配列のみで済ませようとすると、エラーが発生しました。
これは配列の要素を一つずつレンダリングするので、要素一つで意味がわかるようにしないといけない（閉じタグが必要）ということだと思います。

    createSquares() {
        let squares = [];
        for(let i = 0; i < 3; i++){
            squares.push(<div classname="board-row">);
            for(let j = 0; j < 3; j++){
                squares.push(this.renderSquare(i*3+j));
            }
            square.push(</div>);
        }
        return squares;
    }

以上です