Title for this problem: Adding the function to remove products from the cart won’t allow me to add more products
I have this function to add products and with their colors, however, once I added the functionality to remove products with their colors, it does not allow me to add a product anymore.
- Add products and along with the selected color
- Clicking the “-” button should remove the selected color for that product alone. What happens here is that if I’ll add this functionality. it does not allow me to add any products anymore. There’s no error that shows in the console nor does the app crashes as well.
How can I fix this? Thank you
Codesandbox: Add to Cart Sampled 2 with Table - CodeSandbox
Codes:
App.js
export default function App() {
const [cartItems, setCartItems] = useState([]);
const [searchList, setSearchList] = useState([]);
const [searchKey, setSearchKey] = useState("");
useEffect(() => {
let x = [...products];
x = x.filter((y) => {
return y.prodName
.toLocaleLowerCase()
.includes(searchKey.toLocaleLowerCase());
});
setSearchList(x);
}, [searchKey]);
const handleAdd = (id, name, price, size, cat, color) => {
console.log("add", id, name, price, size, cat, color);
const productExist = cartItems.find(
(item) => item.id === id && item.color === color
);
if (productExist) {
setCartItems(
cartItems.map((item) =>
item.id === id && item.color === color
? { ...productExist, quantity: productExist.quantity + 1 }
: item
)
);
} else {
setCartItems([
...cartItems,
{ id, name, price, size, cat, color, quantity: 1 }
]);
}
};
const handleRemove = (product) => {
console.log(product, "remove");
const ProductExist = cartItems.find(
(item) => item.id === product.id && item.color === product.color
);
if (ProductExist.quantity === 1) {
setCartItems(cartItems.filter((item) => item.id !== product.id));
} else {
setCartItems(
cartItems.map((item) =>
item.id === product.id && item.color === product.color
? { ...ProductExist, quantity: ProductExist.quantity - 1 }
: item
)
);
}
};
const handleCartClearance = () => {
setCartItems([]);
};
console.log(cartItems);
return (
<div className="App">
<div>
<input
placeholder="Search product..."
value={searchKey}
onChange={(e) => setSearchKey(e.target.value)}
/>
{searchList.map((item, index) => (
<ul key={item.id}>
<li>
<b>{item.prodName}</b>
</li>
<li>Category: {item.cat}</li>
<li>Size: {item.size}</li>
<li>Php {item.price}.00</li>
{Object.entries(item.colorMap).map((color) => (
<>
{color[1] !== 0 ? (
<>
{color[0]}
<button
onClick={(e) =>
handleAdd(
item.id,
item.prodName,
item.price,
item.size,
item.cat,
color[0]
)
}
>
Add
</button>
{/* <button onClick={(e) => handleAdd(index)}>Add to Cart</button> */}
</>
) : (
<>2</>
)}
<br />
</>
))}
</ul>
))}
</div>
<Cart
cartItems={cartItems}
handleCartClearance={handleCartClearance}
handleRemove={handleRemove}
handleAdd={handleAdd}
/>
</div>
);
}
Cart.js
const Cart = ({ cartItems, handleCartClearance, handleRemove, handleAdd }) => {
console.log(cartItems, "items");
const totalAmount = cartItems.reduce(
(price, item) => price + item.quantity * item.price,
0
);
return (
<div>
Cart page
{cartItems.length >= 1 && (
<button onClick={handleCartClearance}>Clear Orders</button>
)}
{cartItems.length === 0 && <div>No Items in the cart</div>}
<div>
{cartItems.map((item) => (
<div key={item.id}>
<li>{item.id}</li>
<li>{item.name + " " + item.size + "" + item.cat}</li>
<li>{item.color}</li>
<li>{item.quantity}</li>
<li>Total: {parseInt(item.quantity) * parseInt(item.price)}</li>
<button
onClick={(e) =>
handleAdd(
item.id,
item.prodName,
item.price,
item.size,
item.cat,
item.color
)
}
>
+
</button>
<button onClick={handleRemove(item)}>- </button>
</div>
))}
<div>
<b>Total Amount :{totalAmount}</b>
</div>
</div>
</div>
);
};
export default Cart;