tic-tac-toe-1.jsx

<div>
        { 
            [0, 1, 2].map( (i) => {
              return ( 
                <div className="board-row">
                  {
                    [0, 1, 2].map( (j) => {
                      let index = Math.floor((3 * j) / 3) + 3 * i;
                      return this.renderSquare(index)
                  })
                  }
                </div>
              )
            })
         }
</div>

You would have to modify the <Square /> component in the renderSquare function to include a key to avoid React warning. <Square key={i} value={this.props...} />.

I got here from a link on Medium 😁

This is still not exactly two 'for' loops. If you take the requirement as strict you could do it like so:

render() {
    const cols = [];
    const rows = [];
    for (let i = 0; i < 9; i += 3) {
      for (let j = 0; j < 3; j++) {
        rows.push(this.renderSquare(i + j));
      }
      cols.push(
        <div key={i} className="board-row">
          {rows.slice(-3)}
        </div>
      );
    }
    return (<div>{cols}</div>);
  }