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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With