React.js setState() with variable for key inside loop?

Question

Is there a way to use a string variable's value as the key for setState()?

getInitialState: function () {
    return {
        foo: '',
        bar: ''
    }
}

someOtherHandler: function() {
    var arr = ['foo', 'bar'];
    var _this = this;
    var number = Math.random();

    for (var i in arr) {
        _this.setState({ arr[i]: number });
    }

}

React throws a syntax error with the above, and setting arr[i] to a variable ends up setting a new state with that variable's name.

Dan Prince · Accepted Answer · 2015-12-10 05:26:06Z

22

You can create the object before calling setState.

var newState = {};
newState[i] = number;
_this.setState(newState);

Alternatively if you are using ES6, you could make use of a computed property.

_this.setState({ [i]: number });

However this code will call setState multiple times, it's more efficient to only call it once. Build the updated state object, then apply it.

var newState = {};

for(var i in arr) {
  newState[i] = number;
}

this.setState(newState);

edited Dec 10, 2015 at 5:26

answered Dec 10, 2015 at 5:20

Dan Prince

30.1k15 gold badges93 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cy23 Over a year ago

Thanks a lot! I had actually just run across a similar question that essentially pointed me to the same thing: stackoverflow.com/questions/29280445/…

Collectives™ on Stack Overflow

React.js setState() with variable for key inside loop?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related