React is not refreshing the number
when i increase or decrase the product the number on the cart is not changing i have to refresh first
this is the context im using
this is the context im using
export const CartProvider = ({ children }) => {
const { value: cartItems, set: setCartItems } = useStorage("cart", []);
const [totalQuantity, setTotalQuantity] = useState(0);
const handleDecrease = (product, size) => {
const isProductExist = cartItems.find(
(item) => item.id === product.id && item.size === size
);
if (isProductExist) {
if (product.quantity === 1) {
const updatedCart = cartItems.filter(
(item) => item.id !== product.id || item.size !== size
);
console.log(updatedCart);
setCartItems(updatedCart);
} else {
const updatedCart = cartItems.map((item) => {
if (item.id === product.id && item.size === size) {
return {
...item,
quantity: item.quantity - 1,
};
}
return item;
});
setCartItems(updatedCart);
}
}
};
const handleIncrease = (product, size) => {
console.log(cartItems);
const isProductExist = cartItems.find(
(item) => item.id === product.id && item.size === size
);
if (isProductExist) {
const updatedCart = cartItems.map((item) => {
if (item.id === product.id && item.size === size) {
return {
...item,
quantity: item.quantity + 1,
};
}
return item;
});
setCartItems(updatedCart);
}
};
const getTotalQuantity = (v = null) => {
return (v ? v : cartItems).reduce((sum, item) => sum + item.quantity, 0);
};
useLayoutEffect(() => {
setTotalQuantity(getTotalQuantity());
}, []);export const CartProvider = ({ children }) => {
const { value: cartItems, set: setCartItems } = useStorage("cart", []);
const [totalQuantity, setTotalQuantity] = useState(0);
const handleDecrease = (product, size) => {
const isProductExist = cartItems.find(
(item) => item.id === product.id && item.size === size
);
if (isProductExist) {
if (product.quantity === 1) {
const updatedCart = cartItems.filter(
(item) => item.id !== product.id || item.size !== size
);
console.log(updatedCart);
setCartItems(updatedCart);
} else {
const updatedCart = cartItems.map((item) => {
if (item.id === product.id && item.size === size) {
return {
...item,
quantity: item.quantity - 1,
};
}
return item;
});
setCartItems(updatedCart);
}
}
};
const handleIncrease = (product, size) => {
console.log(cartItems);
const isProductExist = cartItems.find(
(item) => item.id === product.id && item.size === size
);
if (isProductExist) {
const updatedCart = cartItems.map((item) => {
if (item.id === product.id && item.size === size) {
return {
...item,
quantity: item.quantity + 1,
};
}
return item;
});
setCartItems(updatedCart);
}
};
const getTotalQuantity = (v = null) => {
return (v ? v : cartItems).reduce((sum, item) => sum + item.quantity, 0);
};
useLayoutEffect(() => {
setTotalQuantity(getTotalQuantity());
}, []);
