Can I do something like this:

var number = 0;
var values = ["my_ponent_state_0", "my_ponent_state_1"];

      this.setState({
          values[number]: evt.target.value
      });

instead of writing out:

      this.setState({
        my_ponent_state_0: evt.target.value
      });

?

I need to iterate through some things and something like this would be useful. But it seems too hacky, and it also doesn't seem to work - or does it? (or something like this)

Can I do something like this:

var number = 0;
var values = ["my_ponent_state_0", "my_ponent_state_1"];

      this.setState({
          values[number]: evt.target.value
      });

instead of writing out:

      this.setState({
        my_ponent_state_0: evt.target.value
      });

?

I need to iterate through some things and something like this would be useful. But it seems too hacky, and it also doesn't seem to work - or does it? (or something like this)

• javascript
• json
• reactjs

• Did you try obj[values[index]] = "value" – Lys Commented Mar 30, 2017 at 21:07

3 Answers 3

Option 1:

var number = 0;
var values = ["my_ponent_state_0", "my_ponent_state_1"];

var newState = {};
newState[values[number]] = evt.target.value;

this.setState(newState);

Option 2: New notation in ECMAScript 2015(Computed property names) - but IE doesn't support this syntax.

var number = 0;
var values = ["my_ponent_state_0", "my_ponent_state_1"];

this.setState({
   [values[number]]: evt.target.value
});

You can create the object dynamically:

var obj    = {},
    number = 0,
    values = ["my_ponent_state_0", "my_ponent_state_1"];

 obj[ values[number] ] = evt.target.value;   // dynamic key creation

With this principle, you can loop over any array to dynamically create any number of the keys, but make sure you want to assign evt.target.value to all.

Demo

function example(evt) {
  // for demo:
  this.setState = function(obj) { console.log(obj); };

  // object setup
  var state_obj = {},
      number    = 0,
      values    = ["my_ponent_state_0", "my_ponent_state_1"];

  // assign the value for a dynamic key
  state_obj[ values[number] ] = evt.target.value;

  // set the state
  this.setState( state_obj );
}


example({
  target: {
    value: 'foo'
  }
});

One way I thought of:

var number = 0;
var values = ["my_ponent_state_0", "my_ponent_state_1"];
var state = {};

values.map(function(v, i) {
    state[v] = evt.target.value; // I've added 'test' for the test...
});

this.setState(state);

console.log(state); // { my_ponent_state_0: 'test', my_ponent_state_1: 'test' }