React spread operator from useState undefined after correctly using function once?

I have an object array that looks like this

index:
    product: data: id: 
    quantity:

I have a shop that when items are added they need to be added to the cart. If the user adds the same object to the cart multiple times I just need the quantity of that item to update.

For some reason when adding the same item to the cart the quantity gets updated correctly the first time. The second time I add the same item to the cart my temp variable that copies the useState array becomes undefined and my quantity value becomes NaN. Using .slice() yielded the same results.

basically:
I add the first item to the cart. I add the same item to the cart with another quantity it updates fine. If add it again the temp var is undefined and my value is now NaN.

   const [cart, setCart] = React.useState([])

const addToCart = (data) => {
    const index = cart.findIndex(ele => ele.product.data.id === data.product.data.id)
    if (index !== -1) {
        let temp = [...cart]
        temp[index] = { ...temp[index], quantity: (data.quantity.value + temp[index].quantity.value) }
        setCart([...temp])
    }
    else {
        setCart([...cart, data])
    }
}

I think it is one of the most common problems. Please read this documentation.

I think it may help:

   const [cart, setCart] = React.useState([])

   const addToCart = (data) => {
     const nextCart = cart.map((cartItem, cartIndex) => {
      if (cartItem.product.data.id === data.product.data.id) {
       // Return a new cart item with updated values
       return {
        ...cartItem,
        quantity: cartItem.quantity.value + data.quantity.value
       };
      
       } else {
       // No change
       return cartItem;
      }
     });

     setCart(nextCart);
   }

Also you can use immer if you want update your object or array state directly.

Your data structure is inconsistent between your calls to addToCart.

It looks like your base state is an Array of objects with at least the following structure:

const cartItem = {
  product: {
    data: { id: 1 },
    quantity: { value: 1 },
  },
};

But when you call addToCart, this line of code is changing the structure of your cart item:

temp[index] = { ...temp[index], quantity: (data.quantity.value + temp[index].quantity.value) }

We could re-format that so it's a little easier to read:

temp[index] = {
  ...temp[index], // Copy the existing object
  quantity: (data.quantity.value + temp[index].quantity.value), // Over-write quantity
  // But now quantity is a number, not an object
};

So when you call addToCart again, the value from your state now looks like this:

const cartItem = {
  product: {
    data: { id: 1 },
    quantity: 2,
  },
};

Compare that to cartItem above; you'll see that the structure for quantity is now different.

What that problematic line should read is this:

temp[index] = {
  ...temp[index],
  quantity: {
    ...temp[index].quantity,
    value: data.quantity.value + temp[index].quantity.value,
  },
};

Try that and see if it helps!