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

Share Improve this question Follow asked Mar 30, 2017 at 21:04 George WelderGeorge Welder 4,0551111 gold badges4545 silver badges7575 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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' }