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
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());
}, []);
1 Reply
return (
<Context.Provider
value={{
totalQuantity,
setTotalQuantity,
cartItems,
handleIncrease,
handleDecrease,
setCartItems: (v) => {
setCartItems(v);
setTotalQuantity(getTotalQuantity(v));
},
}}
>
{children}
</Context.Provider>
);
};
export default function useCart() {
return useContext(Context);
}
return (
<Context.Provider
value={{
totalQuantity,
setTotalQuantity,
cartItems,
handleIncrease,
handleDecrease,
setCartItems: (v) => {
setCartItems(v);
setTotalQuantity(getTotalQuantity(v));
},
}}
>
{children}
</Context.Provider>
);
};
export default function useCart() {
return useContext(Context);
}
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "swiper/swiper-bundle.css";
import { CartProvider } from "./Hooks/Cart.jsx";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<CartProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</CartProvider>
</React.StrictMode>
);
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "swiper/swiper-bundle.css";
import { CartProvider } from "./Hooks/Cart.jsx";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<CartProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</CartProvider>
</React.StrictMode>
);
const { totalQuantity } = useCart();
<IconButton
aria-label="Show cart items"
color="inherit"
onClick={handleCartToggle}
>
<Badge badgeContent={totalQuantity} color="secondary">
<ShoppingCartIcon />
</Badge>
</IconButton>
const { totalQuantity } = useCart();
<IconButton
aria-label="Show cart items"
color="inherit"
onClick={handleCartToggle}
>
<Badge badgeContent={totalQuantity} color="secondary">
<ShoppingCartIcon />
</Badge>
</IconButton>