What is “properer” way?
I’ve got this code which should generate 3x3 “grid” but it doesn’t:
squared = () => {
let ttt = [];
for(let i=0;i<3;i++){
ttt.push(<div className="board-row" key={i}>);
if(i>0){
for(let j=(i+2);j<(i+5);j++){
ttt.push(this.renderSquare(j));
}
}
else{
for(let j=0;j<3;j++){
ttt.push(this.renderSquare(j));
}
}
ttt.push(</div>);
}
return ttt;
}
and by calling in return statement like this:
return (
<div>
{this.squared}
</div>
);
Instead it shows me
.Correct code that i got, that doesn’t generate programatically is:
const row1=<div className="board-row" key={1}>{this.renderSquare(0)}{this.renderSquare(1)}{this.renderSquare(2)}</div>;
const row2=<div className="board-row" key={2}>{this.renderSquare(3)}{this.renderSquare(4)}{this.renderSquare(5)}</div>;
const row3=<div className="board-row" key={3}>{this.renderSquare(6)}{this.renderSquare(7)}{this.renderSquare(8)}</div>;
const rows=[row1,row2,row3];
Which i call like this:
return (
<div>
{rows}
</div>
);
Second one works, first one shows an error on for loop, why?