React remove item from cart

once i open the cart the product is deleted and this error appears

const handleCartDelete = (product, size) => {
    const updatedCart = cartItems.filter(
      (item) => item.id !== product.id || item.size !== size
    );
    setCartItems(updatedCart);
  };
return (
    <Context.Provider
      value={{
        totalQuantity,
        setTotalQuantity,
        cartItems,
        handleIncrease,
        handleDecrease,
        handleCartDelete,
        setCartItems: (v) => {
          setCartItems(v);
          setTotalQuantity(getTotalQuantity(v));
        },
      }}
    >
      {children}
    </Context.Provider>
  );
};

export default function useCart() {
  return useContext(Context);
}

const handleCartDelete = (product, size) => {
    const updatedCart = cartItems.filter(
      (item) => item.id !== product.id || item.size !== size
    );
    setCartItems(updatedCart);
  };
return (
    <Context.Provider
      value={{
        totalQuantity,
        setTotalQuantity,
        cartItems,
        handleIncrease,
        handleDecrease,
        handleCartDelete,
        setCartItems: (v) => {
          setCartItems(v);
          setTotalQuantity(getTotalQuantity(v));
        },
      }}
    >
      {children}
    </Context.Provider>
  );
};

export default function useCart() {
  return useContext(Context);
}

this is the customhook i have

5 Replies

MuhammedAlaaOP•2y ago

const { cartItems, handleDecrease, handleIncrease, handleCartDelete } =
    useCart();
  const handleItemDecrease = (product, size) => {
    handleDecrease(product, size);
    // Perform any additional logic or actions
  };
  const handleItemIncrease = (product, size) => {
    handleIncrease(product, size);
    // Perform any additional logic or actions
  };
  const handleDelete = (product, size) => {
    handleCartDelete(product, size);
  };

<DeleteIcon
                                onClick={handleDelete(
                                  cartItems[i],
                                  cartItems[i].size
                                )}
                              ></DeleteIcon>

const { cartItems, handleDecrease, handleIncrease, handleCartDelete } =
    useCart();
  const handleItemDecrease = (product, size) => {
    handleDecrease(product, size);
    // Perform any additional logic or actions
  };
  const handleItemIncrease = (product, size) => {
    handleIncrease(product, size);
    // Perform any additional logic or actions
  };
  const handleDelete = (product, size) => {
    handleCartDelete(product, size);
  };

<DeleteIcon
                                onClick={handleDelete(
                                  cartItems[i],
                                  cartItems[i].size
                                )}
                              ></DeleteIcon>

this is in the cartsidebar component

MuhammedAlaaOP•2y ago

message.txt

MuhammedAlaaOP•2y ago

Cart.jsx

MuhammedAlaaOP•2y ago

this is the cart side bar when i comment the onClick function on the delete icon

MuhammedAlaaOP•2y ago

https://codesandbox.io/p/github/muhammedalaa1/E-commerce/main

CodeSandbox

CodeSandbox is an online editor tailored for web applications.

Gaming

Programming

React remove item from cart