ImmutableJS - update value in a List

Question

I have a Map like this (in ImmutableJS):

{arrayOfValues: [
  {one: {inside: 'first in array'}},
  {one: {inside: 'second in array'}}
]}

And I want to update the value "inside" in the second entry in the "arrayOfValues" array. How can I do it? This is what I have now and it says "Uncaught Error: invalid keyPath"

theMap.update('arrayOfValues',(list)=>{
  return list.setIn([1,'one','inside'],'updated value'); 
})

I also tried directly this and it didn't work:

theMap.setIn(['arrayOfValues',1,'one','inside'],'updated value');

After several hours of looking for the solution, I appreciate any help. Thank you.

Answer 1

What you are doing is correct (see this JSBin).

const orig = Immutable.fromJS({
  arrayOfValues: [
    { one: { inside: 'first in array' } },
    { one: { inside: 'second in array' } },
  ]
});

const updated = orig.setIn(['arrayOfValues', 1, 'one', 'inside'], 'updated value');

console.log(updated.toJS());

// {
//   arrayOfValues: [
//     { one: { inside: 'first in array' } },
//     { one: { inside: 'second in array' } },
//   ]
// }

When you call orig.setIn(), it doesn't modify orig directly. That's the whole purpose of this Immutable library. It doesn't mutate the existing data but creates a new one from the existing one.

Answer 2

Your setIn example works as you should see in this plunkr: http://plnkr.co/edit/1uXTWtKlykeuU6vB3xVO?p=preview

Perhaps you are assuming the value of theMap will be changed as a result of the setIn?

As these structures are immutable, you must capture the modified value in a new variable as var theMap2 = theMap.setIn(['arrayOfValues',1,'one','inside'],'updated value');