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?

Cassidy · Accepted Answer · 2017-02-23 00:04:25Z

89

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, 2017 at 0:04

Cassidy

3,3635 gold badges41 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thilo Over a year ago

Nice find. Did not know about this ES6 feature. See the other answer for the more clumsy "old way".

Community · Accepted Answer · 2017-05-23 12:25:10Z

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, 2017 at 12:25

CommunityBot

11 silver badge

answered Feb 23, 2017 at 0:05

Thilo

264k107 gold badges527 silver badges674 bronze badges

Collectives™ on Stack Overflow

Using immutability-helper in React to set variable object key

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related