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

Changed the code of the Board from the tutorial to reflect as

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.rows = Array(3).fill(null);
  }
  
  renderSquare(i) {
    return ( this.props.onClick(i)}
    />);
  }
  
  renderRow(row) {
    return (
      

        {this.rows.map((x, col) => this.renderSquare(3*row+col))}
      
    );
  }

  render() {
    return (
      

        {this.rows.map((x, rowIndex) => this.renderRow(rowIndex))}
      
    );
  }
}