++ increments value by 2 instead of 1 - reactjs

Question

I am using the following reducer to add products, delete them, and add them to a cart. I would like the 'ADD_TO_CART' method when called to add an item to the cart, but if an item is already in the cart, I would like to increase it by 1. However, the method is increasing cart items by 2 instead of 1
export default (state, action) => {
switch (action.type) {
case 'ADD_PRODUCT':
return {
...state,
products: [action.payload, ...state.products]
}
case 'DELETE_PRODUCT':
return {
...state,
products: state.products.filter(product => product.id !== action.payload)
}
case 'ADD_TO_CART': if (state.cart.some(cartItem => cartItem.id === action.payload.id)) {
const updatedItemIndex = state.cart.findIndex(cartItem => cartItem.id === action.payload.id)
let cartItems = [...state.cart]
let itemToUpdate = cartItems[updatedItemIndex]
itemToUpdate.quantity++
return { ...state, cart: cartItems }
} else {
const newItem = { ...action.payload, quantity: 1 }
return { ...state, cart: [...state.cart, newItem] }
}
default:
return state
}
}
This is the code dispatching the action
function addToCart(product) {
dispatch({
type: 'ADD_TO_CART',
payload: product
})
}
I am calling the action from the following component
import React, { useContext } from 'react'
import { ProductContext } from './ProductContext'
export const ProductCard = ({ product }) => {
const { deleteProduct, addToCart } = useContext(ProductContext)
const handleDelete = () => {
deleteProduct(product.id)
}
const handleCart = () => {
addToCart(product)
}
return (
<div className='product__card'>
<h3>{product.productName}</h3>
<p>{product.price}</p>
<button className='button'>View Product</button>
<button onClick={handleCart} className='button'>Add to Cart</button>
<button onClick={handleDelete} className='button'>Delete</button>
</div>
)
}

Answer 1

Try changing the quantity from a number to an empty quote.
Old: const newItem = { ...action.payload, quantity: 1 }
New: const newItem = { ...action.payload, quantity: '' }

Answer 2

You have a mistake. You MUTATE your state.
let cartItems = [...state.cart] // <-- reinitialize only the array,
// the array items remains with the same reference!!!!
let itemToUpdate = cartItems[updatedItemIndex]
itemToUpdate.quantity++ // <--- this will mutates your state!!!
return { ...state, cart: cartItems }
Fix: create a new item, and copy the data with the spread operator, and delete the old one.

Answer 3

I have ran into the same problem with a very similar situation, and none of the current answers helped me. Therefore I can only recommend
itemToUpdate.quantity++
Be changed into
itemToUpdate.quantity += 0.5;
I know that this is not the correct way to solve this problem, but the functionality works, and you can change it later when you will find the solution