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.

Answer 1

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);