React - Create nested components with loops

Question

I have a little issue with React. I can\'t create a nested component with a for loop. What I want to do is create 9 cells of a table and then create 3 rows with 3 cells for

Answer 1

To render a list of elements inside JSX, you can do something like that:

render() {
    return 

        {
            [1,2,3].map ( (n) => {
                return this.renderSquare(n)
            })

        }
    
;
}   

Just wrap your array of components into {} in your JSX.

To clarify a bit, this is the same logic of:

return 

    {
        [
            
Hello 1
,
            
Hello 2
,
            
Hello 3
        ]           
    }
;

Note that everytime you render an array of components, you must provide a key prop, as pointed here.

Also, if you want simply print row value in your render function, you should replace:

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

with:

index.forEach( (row, index) => {
    board.push(
{row}
)
})

or, yet, replacing forEach and push with map:

board = index.map( (row, index) => 
{row}
 )

EDIT I created a fiddle with a 9x9 board using your code as a base: https://jsfiddle.net/mrlew/cLbyyL27/ (you can click on the cell to select it)