Using immutability-helper in React to set variable object key

JavascriptJsonReactjsImmutability

Javascript Problem Overview


I have a function I want to write in React. In my class I have a state object fields that looks like this:

this.state = {
  step: 1,
  fields: {
    type: '',
    name: '',
    subtype: '',
    team: '',
    agreement: ''
  }
};

I have various functions that assign those keys using immutability helper that generally look like:

assignType(attribute) {
  var temp = update(this.state.fields, {
    type: {$set: attribute}
  });

  this.setState({
    fields: temp
  });
}

What I would like to do is use a function that's more generic and do something like this:

assignAttribute(field, attribute) {
  var temp = update(this.state.fields, {
    field: {$set: attribute}
  });

  this.setState({
    fields: temp
  });
}

But, this doesn't work. What can I do to use a variable key using immutability-helper?

Javascript Solutions


Solution 1 - Javascript

Figured it out! I needed to use ES6 computed property names and simply edit assignAttribute to:

assignAttribute(field, attribute) {
  var temp = update(this.state.fields, {
    [field]: {$set: attribute}
  });

  this.setState({
    fields: temp
  });
}

Solution 2 - Javascript

You can use the [] syntax if you have dynamic field names:

var data = {}
data[field] = {$set: attribute}

var temp = update(this.state.fields, data)

This gets a lot more concise if you can use ES6.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionCassidyView Question on Stackoverflow
Solution 1 - JavascriptCassidyView Answer on Stackoverflow
Solution 2 - JavascriptThiloView Answer on Stackoverflow