Kevin Powell - Community•2y ago

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

MuhammedAlaaOP•2y ago

  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);
}

this is the main

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>

this is in the Nav component

Gaming

Programming

React is not refreshing the number