Add <div> elements to arrays in JSX?

Question

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

azium azium · Accepted Answer · 2016-06-18T19:23:33

rows.push(<div className="board-row">); is not legal JSX. Keep in mind what JSX actually transpiles to:

Consider var Foo = <div className="board-row" />. (self closing)

This will turn into:

var Foo = React.createElement("div", { className: "board-row" })

If you have children in your jsx:

var Foo =
  <div className="board-row">
    <span />
  <div>

It will turn into this: (third argument is children)

var Foo = React.createElement("div", { className: "board-row" },
  React.createElement("span")
)

So there really is no such thing as calling createElement with just an opening or just closing tags.

That being said you could rewrite your loop such that the inner loop is adding child nodes. Also the _renderSquare function is expecting increasing numbers from 0 - 8. You had i + j, but this isn't the right equation as that way you will get 0, 1, 2, 1, 2, 3, 2, 3, 4.

var rows = [];
var cells = [];
var cellNumber = 0; <-- keep track of increasing value
for (var i = 0; i < this.state.rows; i++) {
  for (var j = 0; j < this.state.columns; j++) {
    cells.push(this._renderSquare(cellNumber))
    cellNumber++
  }
  rows.push(<div className="board-row">{ cells }</div>)
  cells = [];
}

It will complain about adding a missing key prop, so always make sure to do that when creating elements in a loop. You will need to do that here in your div and in your _renderSquare function on the Square. Using the index as the key should be fine in this case.

codepen

Add <div> elements to arrays in JSX?

2 Answers