React Js click event within a for loop

Question

I'm working with React. This is my code:

var rows = [];
for(var i = 1; i <= this.state.numberOfPages; i++) {
    rows.push(<li key={i.toString()} onClick={() => this.getResults(i)}><a href="#">{i}</a></li>)
};

getResults() function is as simple as:

getResults: function(page = this.state.currentPage) {
    console.log(page);
},

this.state.numberOfPages is equal to 3. The issue is that, when I click on <li> tags, 4 is always showed in console. However <li> values are showed correctly in the HTML. I can't understand why is always being evaluated the last i value when it is passed by parameter.

A detail:

In React Console, key property are correct too. The problem is with the parameter only.

Thanks in advance and sorry about my English.

Do you realize that your loop is probably already executed? – AbstractDissonance Dec 27 '16 at 04:27 — AbstractDissonance, Dec 27 '16 at 04:27
@AndyRay I tried it, unfortunately it didn't work – Genarito Dec 27 '16 at 04:50 — Genarito, Dec 27 '16 at 04:50

score 4 · Accepted Answer · answered Dec 27 '16 at 04:52

4

As mentioned in the duplicated answer, you need to close over the variable with some inner function. Using map is an easy way to achieve this:

var rows = new Array(this.state.numberOfPages).fill(0).map( ( zero, index ) =>
    <li key={index} onClick={() => this.getResults(index)}>
        <a href="#">{index}</a>
    </li>
)

answered Dec 27 '16 at 04:52

Andy Ray

30,372
14
101
138

That worked! Thank you so much! – Genarito Dec 27 '16 at 04:57
7

I found a shorter way! You can do this: onClick={this.getResults.bind(this, i) and it works – Genarito Jan 02 '17 at 06:41

React Js click event within a for loop

1 Answers1

Linked