Using immutability-helper in React to set variable object key

Question

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?

Answer 1

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

Answer 2

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.