React-Redux ShopCart Application (Remove_from_cart)

Question

I am currently working on a React-Redux based Cart app, and I am experiencing the following problem:

When I continuously click the remove button in order to remove a product from my cart, the quantity goes below zero. Any solutions on how to end the quantity at 1 and then remove the the whole product from the front end when there is one left?

Below is my function:

case 'REMOVE_FROM_CART':
  return {
    ...state,
    cart: state.cart.filter(item => item.id !== action.payload.id),
    cart: state.cart.map(item =>
        item.id === action.payload.id
          ? { ...item, quantity: item.quantity - 1 }
          : item
      ),
  };

Lajos Arpad · Accepted Answer · 2025-05-31 15:46:25Z

0

Instead of

quantity: item.quantity - 1

you will need

quantity: Math.max(item.quantity - 1, 0)

and have a

visibility={state.isPositive}

while maintaining isPositive whenever the quantity changes.

answered May 31 at 15:46

Lajos Arpad

80.3k42 gold badges122 silver badges234 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Drew Reese · Accepted Answer · 2025-05-31 18:33:38Z

Search the cart for the item you are adjusting the quantity of
If the quantity dips below 1, don't include it in the new cart array value

case 'REMOVE_FROM_CART': {
  // Search for cart item to update
  const item = state.cart.find(item => item.id === action.payload.id);
  
  if (item) {
    // Last item, remove from cart
    if (item.quantity <= 1) {
      return {
        ...state,
        cart: state.cart.filter(item => item.id !== action.payload.id);
      };
    }

    // More than 1 item, update item quantity
    return {
      ...state,
      cart: state.cart.map(item =>
        item.id === action.payload.id
          ? { ...item, quantity: item.quantity - 1 }
          : item
      ),
    };
  }

  // Item not in cart, don't update anything
  return state;
}

Collectives™ on Stack Overflow

React-Redux ShopCart Application (Remove_from_cart)

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related