Add <div> elements to arrays in JSX?

I'm following a react tutorial which implements a tic-tac-toe game. The board is rendered using a hard-coded list of <div>s, like so:

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

I'm trying to convert it to using two for loops instead of hard-coding the squares. Here's what I have. this.state.rows and this.state.columns are both 3, set in the constructor().

  render() {    
    var rows = [];
    for (var i = 0; i < this.state.rows; i++) {
      rows.push(<div className="board-row">);
      for (var j = 0; j < this.state.columns; j++) {
        rows.push(this._renderSquare(i + j))
      }
      rows.push(</div>)           
    }
    return (
      <div>
        {rows}
      </div>     
    )
  }

Codepen is complaining about an unexpected token in the inner for loop of this code. However, if I comment out the lines which push the board-row div into rows, it works fine (but then renders as a single line of 9 boxes).

What am I doing wrong? Can't <div> elements be stored in arrays? Looking at some React JSX documentation, I see that they have a <div> stored in a var, so I'm not sure what I'm doing differently.

Complete codepen is here: http://codepen.io/rbd/pen/jrqjeV?editors=0010