I'm trying to fill create an array of JSX objects using a 2d array to represent a game board:
const rows = [];
for (var i=0; i<8; i++) {
rows.push(<div className="board-row">);
for (var y=0; y<8; y++) {
rows.push(this.renderSquare(y, i));
}
rows.push(</div>);
}
However, I keep getting an error:
Syntax error: Unexpected token on the line: for (var y=0; y<8; y++) { pointing at the 8.
Can anybody help me understand what I'm doing wrong?
div is not closed that's why it is throwing the error, each element should be properly closed.
To solve your issue, use two arrays one for rows and one for columns, first calculate the columns then put that inside the row element.
Write it like this:
var rows = [], column;
for (let i=0; i<8; i++) {
column = [];
for (let y=0; y<8; y++) {
column.push(this.renderSquare(y, i));
}
rows.push(<div className="board-row">{column}</div>);
}
Note: Use let instead of var for i and j variables.
Check this answer for more details: What's the difference between using "let" and "var" to declare a variable?
Update:
As suggested by @Jordan Running, we should use const for rows (it's never reassigned) and let for columns, like this:
const rows = [];
for (let i=0; i<8; i++) {
let column = [];
for (let y=0; y<8; y++) {
column.push(this.renderSquare(y, i));
}
rows.push(<div className="board-row">{column}</div>);
}
let instead of var but not const instead for rows or column?
let over var is scope, since i and j these 2 values are required inside for loop only so use let, scope of var is function level but scope of let is block level, and i used var for columns and rows because before the nested loop start we need to clear all the column values (previous values) for that we need to assign [] again to columns, if we use const then it will throw error. check the link for more details about scope and benefits of these three.
const for rows (it's never reassigned) and let for columns. There's no advantage to using var here.In the rows.push(<div className="board-row">); the compiler was expecting the body of the div followed by closing tags. JSX wont accept mismatched tags.
You must have meant this:
const rows = [];
for (var i=0; i<8; i++) {
let inner = []
for (var y=0; y<8; y++) {
inner.push(this.renderSquare(y, i));
}
rows.push(<div className="board-row">{inner}</div>);
}
Inside the row div, have an array of squares.
