Updating the array object in React state using immutability helper

Question

I am updating an object within an array in React state using immutability helper.

The object I want to modify is nested:

this.state = {
  a: {
    b: [{ c: '', d: ''}, ...]
  }
}

I want to update the prop c within the nth element of b using immutability helper.

The equivalent code without the immutability helper is:

const newState = Object.assign({}, this.state);
newState.a = Object.assign({}, newState.a);
newState.a.b = newState.a.b.slice();
newState.a.b[n] = Object.assign({}, newState.a.b[n]);
newState.a.b[n].c = 'new value';
this.setState({ newState });

I know the above code is a bit ugly. I am assuming the code using immutability helper will solve my problem. Thanks

Consider using ImmutableJS.

Niyoko
– Niyoko

2016-10-27 05:41:47 +00:00
Commented Oct 27, 2016 at 5:41 — Niyoko
– Niyoko, Commented Oct 27, 2016 at 5:41

QoP · Accepted Answer · 2016-10-27 06:22:28Z

49

One way to do it would be using $set

let index = 0;
let newState = update(this.state, {
   a: {
     b: {
      [index]: {
               c: { $set: "new value"}
       }
    }
  }
});
this.setState(newState);

jsfiddle

answered Oct 27, 2016 at 6:22

QoP

28.5k16 gold badges78 silver badges77 bronze badges

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

4 Comments

Vraj Solanki Over a year ago

Does update return a new object/element like abc = Object.assign({}, xyz) or it changes the object given as parameter in place??

Wish Over a year ago

@VrajSolanki For this example, it will return new state object, with new a object (rest keys are the same, old references), with new b array in it, all of the element refernces wont be changed but [index] one. And with new reference for c, the rest will be old references.

a15n Over a year ago

@VrajSolanki the $set command will "replace the target entirely". The $merge command will merge the keys of object with the target. github.com/kolodny/immutability-helper#available-commands

Onat Korucu Over a year ago

Don't forget to import "update" from immutability-helper. import update from 'immutability-helper';

Community · Accepted Answer · 2018-04-26 10:41:16Z

9

Im importing update from immutability helper here :)

this.state = {
  a: {
    b: [{ c: '', d: ''}, ...]
  }
} 


this.setState((prevState, props) => update(prevState, {
    a: {
        b: {
            $apply: b => b.map((item, ii) => {
                if(ii !== n) return item;
                return {
                    ...item,
                    c: 'new value'
                }
            })
        }
    }
}))

edited Apr 26, 2018 at 10:41

CommunityBot

11 silver badge

answered Oct 27, 2016 at 6:02

FlatLander

1,78515 silver badges21 bronze badges

Collectives™ on Stack Overflow

Updating the array object in React state using immutability helper

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related