title: React for loops
body: <p>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. </p>
  
  <p>Anyway, for the following:</p>
  
  <pre><code>function Row(props){
    function renderSquare (i) {
      return &lt;Square key={i} value={props.squares[i]} onClick={() =&gt; props.onClick(i)} /&gt;;
    }
    const columns = 3;
    let ss = [];
    for(var a = 0, i = props.counter * columns; a &lt; 3; a++, i++){
      //Test Code
    }
    return (
      &lt;div className="board-row"&gt;
        {ss}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>When I replace "Test Code", this works</p>
  
  <pre><code>ss.push(renderSquare(i));
  </code></pre>
  
  <p>But this fails</p>
  
  <pre><code>ss.push(&lt;Square key={i} value={props.squares[i]} onClick={() =&gt; props.onClick(i)}/&gt;);
  </code></pre>
  
  <p>The second option fails since its not creating "separate" onClick elements. How can I make the failing example work?</p>
  
  <hr>
  
  <p>Update #1</p>
  
  <h2><a href="https://codepen.io/TriStarGod/pen/mRpVwV?editors=0111" rel="nofollow noreferrer" title="Sample">Sample</a></h2>
  
  <p>Update #2
  I changed the var to let as recommended by @Matthias247 and it now works :D</p>
  
  <pre><code>function Row(props){
    function renderSquare (i) {
      return &lt;Square key={i} value={props.squares[i]} onClick={() =&gt; props.onClick(i)} /&gt;;
    }
    const columns = 3;
    let ss = [];
    for(let a = 0, i = props.counter * columns; a &lt; columns; a++, i++){
      ss.push(&lt;Square key={i} value={props.squares[i]} onClick={() =&gt; props.onClick(i)}/&gt;);
      //ss.push(renderSquare(i));
      //console.log(i);
    }
    return (
      &lt;div className="board-row"&gt;
        {ss}
      &lt;/div&gt;
    );
  }
  </code></pre>