title: React Js click event within a for loop
body: <p>I'm working with React. This is my code:</p>
  
  <pre><code>var rows = [];
  for(var i = 1; i &lt;= this.state.numberOfPages; i++) {
      rows.push(&lt;li key={i.toString()} onClick={() =&gt; this.getResults(i)}&gt;&lt;a href="#"&gt;{i}&lt;/a&gt;&lt;/li&gt;)
  };
  </code></pre>
  
  <p><code>getResults()</code> function is as simple as:</p>
  
  <pre><code>getResults: function(page = this.state.currentPage) {
      console.log(page);
  },
  </code></pre>
  
  <p><code>this.state.numberOfPages</code> is equal to 3. The issue is that, when I click on <code>&lt;li&gt;</code> tags, 4 is always showed in console. However <code>&lt;li&gt;</code> values are showed correctly in the HTML. I can't understand why is always being evaluated the last <code>i</code> value when it is passed by parameter.</p>
  
  <p><strong>A detail:</strong></p>
  
  <p>In React Console, key property are correct too. The problem is <code>with the parameter only</code>.</p>
  
  <p>Thanks in advance and sorry about my English.</p>