Update object inside array in useState

Question

I have this cart state in which the initial value is an empty array [].

const [cart,setCart] = useState([]);

This is how one of my product object looks like,

{id: 1, name: 'Shoe pair', price: 40}

There is an add to cart button for each product. So when the add to cart button is clicked addToCart function is triggered,

const addToCart = (item) => {
  let initialItem = {id: item.id, name: item.name, quantity: 1} 
  let existingItem = cart.filter(cartItem => item.id === cartItem.id);
  if(existingItem.length > 0){
    existingItem.quantity = existingItem.quantity + 1;
  } else {
    setCart(crr => [...crr, initialItem ]);
  }
}

What does addToCart do? As you can see it is simple.First, it creates an object by setting the initial quantity to 1. If already the same product is present in the cart it updates the quantity in the cart product by 1 else the initialItem being added to the cart.

To monitor this occurrence I used useEffect hook,

useEffect(() => {
 console.log(cart);
}, [cart]);

My problem is I can't see the cart in the console log when the quantity updates by 1 , But it shows when the initialItem is being pushed to the cart.

existingItem is an array (because it was created by cart.filter), thereby it has no .quantity property. — James
– James, Commented Oct 13, 2022 at 18:04

Sergey Sosunov · Accepted Answer · 2022-10-13 18:05:42Z

2

First issue: It is find, not filter.

Next issue - modifying item inside of array will not tell React that array is changed, you need to re-set state after existing item update also.

const addToCart = (item) => {
  const initialItem = { id: item.id, name: item.name, quantity: 1 };
  const existingItem = cart.find((cartItem) => item.id === cartItem.id);
  if (existingItem) {
    existingItem.quantity += 1;
    setCart((curr) => [...curr]);
  } else {
    setCart((curr) => [...curr, initialItem]);
  }
};

answered Oct 13, 2022 at 18:05

Sergey Sosunov

4,6502 gold badges13 silver badges21 bronze badges

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

1 Comment

Mishen Thakshana Over a year ago

Thanks for your answer easy to understand

Jake Loew · Accepted Answer · 2022-10-14 16:34:16Z

The reason your useEffect is not running when you think it should, is because its dependency is not being updated when you think it is. It will run when setCart is called and the reference to cart is updated, and then you will see your console log.

filter returns a new array -- will not mutate the original array. docs -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

find returns the item by reference, if found -- otherwise returns undeifined. docs -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Alternate example:

const addToCart = (item) => {
  const existingItem = cart.find(i => i.id === item.id)
  const updatedCart = existingItem
    ? cart.map(i => {
        return i.id === item.id ? {...i, quantity: i.quantity + 1} : i
      })
    : [...cart, item]
  }
  setCart(updatedCart)
}

Collectives™ on Stack Overflow

Update object inside array in useState

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related