Update Object whose value is an array of objects in an immutable way

Question

I need to update the state in my React component:

The state looks like this:

const state = {
    '123': [{
                progress: 0;
                lastModified: 999;
            },
            {
                progress: 0;
                lastModified: 666;
            }],
    '1234': [{
                progress: 0;
                lastModified: 111;
            },
            {
                progress: 0;
                lastModified: 222;
            }]            
};

Given that I know the object key e.g. 123 I want to update the progress value given that i also know the lastModified to use to find the object.

How to go about this in an immutable way?

Does this answer your question? What is the most efficient way to deep clone an object in JavaScript? — Jared Smith
– Jared Smith, Commented Oct 15, 2020 at 20:42

Gabriele Petrioli · Accepted Answer · 2020-10-15 20:10:00Z

1

You need to create new containers for all ancestors of the object you want to modify

const knownTarget = '123';
const knownLastModified = 666;
const changes = {
  progress: 100
}

const state = {
  '123': [{
      progress: 0,
      lastModified: 999,
    },
    {
      progress: 0,
      lastModified: 666,
    }
  ],
  '1234': [{
      progress: 0,
      lastModified: 111,
    },
    {
      progress: 0,
      lastModified: 222,
    }
  ]
};

const newState = { ...state,
  [knownTarget]: state[knownTarget].map(item => {
    if (item.lastModified === knownLastModified) {
      return {
        ...item,
        ...changes
      };
    }

    return item;
  })
}

console.log(state);
console.log(newState);

answered Oct 15, 2020 at 20:10

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

Collectives™ on Stack Overflow

Update Object whose value is an array of objects in an immutable way

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related