Update array inside object if it exists, otherwise push array to object

Question

If the object is currently in the array I want to update some value, and if it's not I want to add it to the array. This is the solution I have below, which I don't feel is the best/correct way to do it.

const handleAddToCart = product => {
  const newList = [...cart]
  if (!newList.includes(product)) {
    newList.push(product)
  } else {
    const productIndex = newList.findIndex((obj => obj._id === product._id))
    newList[productIndex].prop = "Some value"
  }
  setCart(newList)
}

Thank you.

Is there some unique identifier for each object? If not, then you will need to do a deep comparison of the objects. — iz_
– iz_, Commented May 15, 2021 at 1:10

iz_ · Accepted Answer · 2021-05-15 01:20:16Z

1

You have to be pretty careful here, as there are a few gotchas with object comparison and mutating the state ([...cart] is not sufficient in deep copying cart). You can update the state in a pure fashion as follows, although I would recommend something like Redux for complex state management.

const handleAddToCart = product => {
    const index = cart.findIndex(obj => obj._id === product._id)
    if (index === -1) {
        setCart(cart.concat(product))
    } else {
        setCart([
            ...cart.slice(0, index),
            Object.assign({}, product, { prop: "Some value" }),
            ...cart.slice(index + 1),
        ])
    }
}

answered May 15, 2021 at 1:20

iz_

16.7k4 gold badges29 silver badges43 bronze badges

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

Comments

Ken Bekov · Accepted Answer · 2021-05-15 01:44:32Z

0

const handleAddToCart = productToAdd => {
    const newList = [...cart];
    const existent = newList.find(product => product.id === productToAdd.id);
    if(existent) {
        existent.prop = "prop";
    } else {
        newList.push(productToAdd);
    }
    setCart(newList);
}

edited May 15, 2021 at 1:44

answered May 15, 2021 at 1:23

Ken Bekov

14.1k3 gold badges40 silver badges46 bronze badges

4 Comments

iz_ Over a year ago

Would existent.prop = productToAdd.prop; be directly mutating the state? Also, I think you meant push instead of add.

Ken Bekov Over a year ago

@iz_ since we're passing new array to the setCart() it's enough to initiate re-rendering. And thanks for noticing add )

iz_ Over a year ago

I'm not very familiar with React internals, but this question stackoverflow.com/q/37755997 seems to suggest that you should avoid mutating state even if it does not cause any immediate problems.

Ken Bekov Over a year ago

@iz_ generally it's a good suggestion. But it depends on structure of component. And it's really applicable to redux reducers. I just answered the question of the topic.

Collectives™ on Stack Overflow

Update array inside object if it exists, otherwise push array to object

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related