I'm learning JavaScript / React. I'm trying to create a simple for loop for the tic-tac-toe example on the react website but so far its been problematic. Oddly, theres several map examples but no for loop examples.
Anyway, for the following:
function Row(props){
function renderSquare (i) {
return <Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)} />;
}
const columns = 3;
let ss = [];
for(var a = 0, i = props.counter * columns; a < 3; a++, i++){
//Test Code
}
return (
<div className="board-row">
{ss}
</div>
);
}
When I replace "Test Code", this works
ss.push(renderSquare(i));
But this fails
ss.push(<Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)}/>);
The second option fails since its not creating "separate" onClick elements. How can I make the failing example work?
Update #1
Update #2 I changed the var to let as recommended by @Matthias247 and it now works :D
function Row(props){
function renderSquare (i) {
return <Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)} />;
}
const columns = 3;
let ss = [];
for(let a = 0, i = props.counter * columns; a < columns; a++, i++){
ss.push(<Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)}/>);
//ss.push(renderSquare(i));
//console.log(i);
}
return (
<div className="board-row">
{ss}
</div>
);
}
I think the problem is that you capture i into the element and the onClick closure. You change i during the for loop, but in the end it's the same for all inserted elements -> props.counter + 3.
To fix it you need to create a unique instance of all captured values for each element. This is exactly what you do with the renderSquare method which creates a new instance of i inside the function body, which is now captured by the element.
Edit:
Using a let binding, which creates a fresh instance of the variable per iteration, also works:
for (let a = 0, i = props.counter; a < 3; a++, i++) {
ss.push(<Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)}/>);
}