Using immutability-helper in React to set variable object key
JavascriptJsonReactjsImmutabilityJavascript 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.