better way to update one of the objects in array, in an immutable way

[bwyx]

Hi,

I need to update one of the object in array based on current data

here is my current working code:

mutateDevice(currentData => {
  const newData = currentData
                  .slice(0, index)
                  .concat({ ...currentData[index], state: checked })
                  .concat(currentData.slice(index+1, currentData.length))

  return newData
}, false)

I have tried spread clone array and using map(), filter(), reduce() to update the state but with no success because of spread's shallow clone.

are there any better way than using slice() and concat() and not using any 3rd party lib at all?

[meatflavourdev]

If I understand correctly, I don't see why you can't nest spread operators to produce the next immutable state?

const newData = [
  ...currentData,
  [index] : { ...currentData[index], state: checked },
];

Spread may be shallow, but you can use nesting for deeper state updates.

Why not use a library like Immer? You won't regret it.

Edit: fixed newData's type to return an Array (my mistake)

[bwyx]

If I understand correctly, I don't see why you can't nest spread operators to produce the next immutable state?

first, because newData[] should return an Array type, and when I trying to spread an array and modify its items that items are still bind to currentData[] items.

Because of that mutate() didn't recognize the different between currentData[] and newData[] then react not re-render the component

const newData = {};

this should be newdata = [];

Why not use a library like Immer? You won't regret it.

I'll try that, thanks for your suggestion

[meatflavourdev]

Looking at my code in that answer and thinking "wtf!?" Must have been tired.

Something like this is what would, you know, actually work

function updateObjectInArray(array, action) {
  return array.map((item, index) => {
    if (index !== action.index) {
      // This isn't the item we care about - keep it as-is
      return item
    }

    // Otherwise, this is the one we want - return an updated value
    return {
      ...item,
      ...action.item
    }
  })
}

As I previously suggested-- immer ior immutable.js are great libraries for working with immutable patterns.

The function is part of a wonderful page from the redux docs on immutable update patterns that I like to use for reference.