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?

score 88 · Accepted Answer · answered Feb 23 '17 at 00:04

88

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

answered Feb 23 '17 at 00:04

Cassidy

3,328
5
39
76

2

Nice find. Did not know about this ES6 feature. See the other answer for the more clumsy "old way". – Thilo Feb 23 '17 at 00:05

score 4 · Answer 2 · edited May 23 '17 at 12:25

4

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.

edited May 23 '17 at 12:25

Community

1
1

answered Feb 23 '17 at 00:05

Thilo

257,207
101
511
656

Using immutability-helper in React to set variable object key

2 Answers2