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

Live demo on codepen

Nested loops in render() function (explanation in comments:)

class Board extends React.Component {
  renderSquare(i) {
    return (
       this.props.onClick(i)}
      />
    );
  }

  render() {
     var self = this;
    return (
      

      // you can use: [...Array(3)] instead of [1,2,3]
        {[1, 2, 3].map(function(row, rowIdx) { // create rows 
          return (
            

              {
              // you can use: [...Array(3)] instead of [1,2,3]
              [1, 2, 3].map((col, colIdx) => { // create columns
                return self.renderSquare((3 * rowIdx) + colIdx); // calculate square index
              })
              }
            
          );
        })}
      
    );  
  }
}