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