React-создание вложенных компонентов с циклами

у меня есть небольшая проблема с React. Я не могу создать вложенный компонент с циклом for. Я хочу создать 9 ячеек таблицы, а затем создать 3 строки с 3 ячейками для каждой строки, а затем смонтировать 3 строки вместе и создать доску 9x9.

Пусть говорят, что я хочу получить что-то вроде этого, но с помощью цикла

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

render(){    
    return(
        <div>
            <div className="board-row">
                {this.renderSquare(0)}
                {this.renderSquare(1)}
                {this.renderSquare(2)}
            </div>
            <div className="board-row">
                {this.renderSquare(3)}
                {this.renderSquare(4)}
                {this.renderSquare(5)}
            </div>
            <div className="board-row">
                {this.renderSquare(6)}
                {this.renderSquare(7)}
                {this.renderSquare(8)}
            </div>
        </div>
    );        
}

}

Я искал другие вопросы в течение нескольких часов, и я думаю, что мой код почти правильный, но он не отображает то, что я хочу. Я получаю только белую страницу.

вот мой код:

class Board extends React.Component { 

renderSquare(i) {
    return <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />;
}

createCells(i){
    if(i%3){return;}
    var index = this.fillN(Array(i)); //index=[0,1,2,3,4,5,6,7,8]
    var cells = [];
    index.forEach(function(i){
        cells.push(() => {
            return(
                <div>
                    {this.renderSquare(i)}
                </div>
            );
        });
    });
    return cells;
}

createRows(cells){
    var index = this.fillMod3(Array(3)); //index=[0,3,6]
    var rows = []
    index.forEach(function(i){
        rows.push(() => {
            return(
                <div>
                    {cells[i]}
                    {cells[i+1]}
                    {cells[i+2]}
                </div>
            );
        });
    });
    return rows;
}

render(){    
    var cells = this.createCells(9);
    var rows = this.createRows(cells);
    var board = [];
    var index = this.fillN(Array(1));

    index.forEach(function(row){
        board.push(() => {
            return(
                <div>{row}</div>
            );
        });
    })

    return(
        <div>
            {board[0]}
        </div>
    );        
}

Я всегда получаю на экране что-то вроде этого:

<Board>
  <div> /*empty*/ </div>
</Board>

Я хочу уточнить, что я уверен, что остальная часть кода, с которой взаимодействует этот компонент (плата), не имеет проблем.

Я новичок в react, и если кто-то может мне помочь, я буду очень благодарен. Извините за мой бедный английский

EDIT1: после marklew примеры я должен быть в состоянии сделать что-то такой

    render(){   
    var index1 = this.fillN(Array(3)); //index1=[0,1,2]
    var index2 = this.fillN(Array(3)); //index2=[0,1,2]

    return(
        <div>
            {index1.map((e1,i1) => {
                return(
                    <div key={i1} className="board-row">
                        {index2.map((e2, i2) => {
                            return(
                                <p key={i2+10}>
                                    {this.renderSquare(i2)}
                                </p>
                            )
                        })}
                    </div>
                )    
            })}
        </div>
    );

}

но он не делает то, что я хочу. Я получаю только столбец с 9 ячейками, и ячейки являются одними и теми же объектами. Не понимаю почему. (Я понимаю, что это те же объекты, потому что я назначаю функцию дескриптора onClick, когда я создаю их так:

<Board 
     onClick={(i) => this.handleClick(i)} //handleClick just draws a X in the cell
     />

и я получаю X утопить в 3 клетки одновременно

EDIT2: Я достиг решение:

render(){   
    var index1 = this.fillMod3(Array(3));        

    return(
        <div>
            {index1.map((e,i) => {
                return(
                    <div key={i} className="board-row">
                        {this.renderSquare(e)}
                        {this.renderSquare(e+1)}
                        {this.renderSquare(e+2)}
                    </div>
                )    
            })}
        </div>
    );

}

}

но это не то, чего я хочу. Я хочу еще одну петлю даже для функция rendersquare(i) стажера.