Make React Properties not Tied to Specific Variables - reactjs

Question

I'm trying to create a group of react elements through a for loop. However, it seems that, rather than each element getting its own copy of the variables per for loop, they are tied to whatever the variable is at the end of the for loop (where i = 3). How can I prevent this. Thanks.
makeCheckboxes() {
var checkboxes = [];
for(var i = 0; i < this.props.flagNames.length; i++) {
console.log("Making checkbox. i = " + i);
checkboxes.push((
<React.Fragment>
<label><input type="checkbox" name="reportFlags" value="fraud" checked={this.state.reportFlags[i]} onClick={() => this.handleCheck(i)}/>{this.props.flagNames[i]} </label><br />
</React.Fragment>
));
}
return checkboxes;
};

Answer 1

just replace
for(var i = 0; i < this.props.flagNames.length; i++) {
by
for(let i = 0; i < this.props.flagNames.length; i++) {
actually it will create a closure, so it should sove the problem
if you still want to use var you can change your code like this using immediately-invoked function expression iife
for(var i = 0; i < this.props.flagNames.length; i++) {
console.log("Making checkbox. i = " + i);
checkboxes.push((
<React.Fragment>
<label>
<input
type="checkbox"
name="reportFlags"
value="fraud"
checked={this.state.reportFlags[i]}
onClick={((j) => () => this.handleCheck(j))(i)} //here is the iife
/>
{this.props.flagNames[i]}
</label><br />
</React.Fragment>
));
}
return checkboxes;