React merge immutable array of objects using React Immutability helpers or Immutable js

Question

I am trying to merge an immutable array of objects using Reacts Immutability helpers or Immutable js which ever one. I am trying to create a list of only records where the names have changed. I am trying to avoid creating duplicates in the list if the name has been changed multiple times before submission which lead me to believe a merge was the path I needed to take. An example of what I am trying to achieve is below.

 var objArray = [{id:4, name:'bar'}, {id:10, name:'test'}];
 var newObj = {id:4, name:'foo'};

 var updatedEntries = update(this.state.nameChanges, {$merge: {newObj});

The Result I am looking for is:

 objArray = [{id:4, name:'foo'}, {id:10, name:'test'}]

The Result I seem to be getting is:

 objArray = [{id:4, name:'foo'}]

I have tried using Facebook React immutability helpers but cannot seem to get the result I need. I seem to be having a little trouble trying wrapping my head around what the merge function is actually doing. Any help is appreciated.

Thanks

I'm not sure what you're update does, but merge works for me — Kyeotic
– Kyeotic, Commented Dec 8, 2015 at 19:36
@Tyrsius It's not ImmutableJS - it's the builtin variants that React ships with. — Henrik Andersson
– Henrik Andersson, Commented Dec 8, 2015 at 19:38
Oh, in that case I just showed you how to do it with ImmutableJS. Does that work? — Kyeotic
– Kyeotic, Commented Dec 8, 2015 at 19:40
No it does not if the array is empty its sets the values to undefined and if it is not empty it still just overwrites it and removes any other objects in the array except the new one. — AndrewBrntt
– AndrewBrntt, Commented Dec 8, 2015 at 20:18

Henrik Andersson · Accepted Answer · 2015-12-08 20:17:57Z

2

You're almost there, what you need to do is to first filter out the object you want and then using merge via its index in the objArray. The official docs shows how to do this

var objArray = [{id: 4, name: 'bar'}, {id: 10, name: 'test'}];

var i = -1;
objArray.map(function (obj, index) {
  if (obj.name === 'bar') i = index;
});

var mergeObject = {};
mergeObject[i] = {$merge: {name: 'Foo'}};

var newState = update(objArray, mergeObject);

>>  [[object Object] {
  id: 4,
  name: "Foo"
}, [object Object] {
  id: 10,
  name: "test"
}]

edited Dec 8, 2015 at 20:17

answered Dec 8, 2015 at 20:06

Henrik Andersson

47.5k16 gold badges102 silver badges94 bronze badges

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

3 Comments

AndrewBrntt Over a year ago

Little more code then I expect there to be but yeah that is what I need thanks

Henrik Andersson Over a year ago

I was being overly verbose, you can use map as a fancy iterator and a variable to close over the index. I've updated the code a bit. But since you want to define a dynamic key on the merge you need to make that intermediary object.

Anenth Over a year ago

Is there any better solution? is there any other library which does this?

Collectives™ on Stack Overflow

React merge immutable array of objects using React Immutability helpers or Immutable js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related