React for loops

Question

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

Sample

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>
  );
}

Answer 1

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)}/>);
}