Reactでの二重ループ

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

React、Javasctipt初心者であり、非常に手こずったためメモ。

index.js

class Board extends React.Component {
    renderSquare(i){
        return (
            <Square 
                value={this.props.squares[i]} 
                onClick={() => this.props.onClick(i)}
            />
        );
    }
    Content(i){
        let content=[];
        for(let j=i;j<i+3;j++){
            content.push(this.renderSquare(j));
            }
        console.log(content);
        return content;
    }
    render(){
        let items = [];
        for(let i=0;i<9;i=i+3){
            items.push(<div className="board-row" key={i}>{this.Content(i)}</div>); 
        }
        
        return(
            <div>
                {items}
            </div>
        );
    }
}

普通にDOMをfor文に入れても記述できず、配列にpushしたものをレンダリングする必要がある。
また、二重ループの場合は、for文内でpush後にjsコードを記述することができないため、関数を用いる必要がある。
ここで、無名関数で行いたいところであるが、無名関数で行うと、「renderのなかでreturnを返すな」というwarningが出る。そのため、class内でメソッドを定義し、それを用いることになる。

一応これの通りにチュートリアルのコードを書き換えれば、二重ループでマスがレンダリングできる。

おそらくもっとスタイリッシュでクレバーな書き方があると思うけれどとりあえず。
これから先、二重ループを用いる時のためにメモをしておく。