Réagir - Créer des composants imbriqués avec des boucles

J'ai un petit problème avec Réagir. Je ne peux pas créer un ensemble de composants avec une boucle for. Ce que je veux faire est de créer 9 cellules d'un tableau, puis la création de 3 lignes avec 3 cellules pour chaque ligne et après que monter les 3 lignes ensemble et de créer un conseil de 9x9.

Disons que je veux obtenir quelque chose comme cela, mais à l'aide d'une boucle

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>
    );        
}

}

J'ai cherché d'autres question pendant des heures et je pense que mon code est presque correct, mais il ne rend pas ce que je veux. Je me retrouve avec une page blanche.

voici mon code:

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>
);        
}

Je reçois toujours sur l'écran quelque chose comme ceci:

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

Je tiens à préciser que je suis sûr que le reste du code avec laquelle le composant (Conseil d'administration) interagit n'a pas de problèmes.

Je suis nouveau dans réagissent et si someoane pouvez m'aider je vous aprécier très bien.
Désolé pour mon mauvais anglais

EDIT1:
suivant marklew exemples, je devrais être capable de faire quelque chose comme ce

    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>
);
}

mais il ne veut pas faire ce que je veux. Je obtenir seulement une colonne avec 9 cellules et les cellules sont les mêmes objets. Je ne comprends pas pourquoi. (Je comprends que soient les mêmes objets, car je attribuer une poignée de la fonction onClick lorsque je les créer comme ça:

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

et j'ai le X se noyer dans 3 cellules simultanément

EDIT2:
J'ai atteint une solution:

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>
);
}

}

mais n'est pas ce que je veux. Je veux une autre boucle même pour le stagiaire renderSquare(i) la fonction.

OriginalL'auteur neboduus | 2017-01-15