Cannot get incremented value inside for loop in React

Question

I have a for loop which is supposed to loop twice. I want to use the incremented values (1 and 2) to set id. However, it gives me value 3 in both cases.

Here is my code:

for(var i=1; i<=2; i++) { //Add two options by default
  this.setState(prevState => ({ //add option Object with default attributes
    options_array: [...prevState.options_array, { id: i,
                                                  description: '',
                                                  value: null  }], 
  })) 
}

Build the new state in the loop, then call `setState`, once. — , Jul 23 '19 at 07:22

score 3 · Accepted Answer · edited Jul 23 '19 at 07:29

3

Use let instead of var in for loop.

edited Jul 23 '19 at 07:29

Satpal

132,252
13
159
168

answered Jul 23 '19 at 07:14

ND NAVEEN

96
5

thank you very much! It did solve the problem. Could you, please, enlighten me on the cause of it? – Umar Adkhamov Jul 23 '19 at 07:19
1

its because of scope of variable ,where let scope will delete for every loop but var scope remains. – ND NAVEEN Jul 23 '19 at 07:23
@UmarAdkhamov https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var – Jul 23 '19 at 07:23

score 1 · Answer 2 · answered Jul 23 '19 at 07:18

1

You need to wrap the setState function in a unique closure for different i, otherwise they will share the same reference.

for (var i = 1; i <= 2; i++) { //Add two options by default
    (i => this.setState(prevState => ({ //add option Object with default attributes
        options_array: [...prevState.options_array, {
            id: i,
            description: '',
            value: null
        }],
    })))(i);
}

answered Jul 23 '19 at 07:18

Hao Wu

17,573
6
28
60

thank you for your response. However, using let instead of var solved the problem. – Umar Adkhamov Jul 23 '19 at 07:26

score 0 · Answer 3 · answered Jul 23 '19 at 07:23

You can also try this:

let newArray = [];
for(var i=1; i<=2; i++) { //Add two options by default
newArray.push({ id: i,description: '',value: null  });
}

  this.setState(prevState => ({ //add option Object with default attributes
    options_array: [...prevState.options_array, ...newArray], 
  }))

score 0 · Answer 4 · answered Jul 23 '19 at 07:24

var objectsArray = [];

for(var i=1; i<=2; i++) {
  objectsArray.push(
    {
      id: i,
      description: '',
      value: null
    }
  )
}

this.setState(prevState => ({
    options_array: [...prevState.options_array, ...objectsArray], 
}))

Try like this.

Cannot get incremented value inside for loop in React

4 Answers4