javascript - React for loops

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  props.onClick(i)} />;
  }

  const columns = 3;
  let ss = [];
  for(var a = 0, i = props.counter * columns; a < 3; a++, i++){
    //Test Code
  }
  return (
    

      {ss}
    
  );

}

When I replace "Test Code", this works

ss.push(renderSquare(i));

But this fails

ss.push( 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  props.onClick(i)} />;
  }
  const columns = 3;
  let ss = [];

  for(let a = 0, i = props.counter * columns; a < columns; a++, i++){
    ss.push( props.onClick(i)}/>);
    //ss.push(renderSquare(i));
    //console.log(i);
  }
  return (
    

      {ss}
    
  );

}

Answer

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( props.onClick(i)}/>);
}