Problem with increasing product quantity in the cart using usereducer (React)

Question

I have a problem increasing and decreasing the number of products in the cart of only the targeted product using the use-reducer in React. When ever i click on the increase or decrease button, i recieve error and the entire display disappear

Here is my reducer function:

 if (action.type === "INCREASE_QUANTITY") {
    return {
      ...state,
      cart: state.cart.map((x) =>
        x.id === action.payload ? x.quantity + 1 : x.quantity
      ),
    };
  }

  if (action.type === "DECREASE_QUANTITY") {
    {
      return {
        ...state,
        cart: state.cart.map((x) =>
          x.id === action.payload ? x.quantity - 1 : x.quantity
        ),
      };
    }
  }

And this is my dispatch function:

  const increaseQuanity = (id) => {
    dispatch({ type: "INCREASE_QUANTITY", payload: id });
  };
  const decreaseQuanity = (id) => {
    dispatch({ type: "DECREASE_QUANTITY", payload: id });
  };

And finally, this is the button, which calls the function:

<div className="flex space-x-2 md:space-x-3 items-end mt-4 md:mt-9 md:text-xl">
                    <button
                      onClick={() => decreaseQuanity(item)}
                      className=" font-bold text-yellow-700 shadow p-2 border-1 rounded-md  ">
                      <FaMinus />
                    </button>
                    <h3 className="text-2xl ">{item.quantity}</h3>

                    <button
                      onClick={() => increaseQuanity(item)}
                      className=" font-bold text-yellow-700 shadow p-2 border-1 rounded-md  ">
                      <FaPlus />
                    </button>
                  </div>

Please, I really need help. Thanks!

You could show your attempts of increasing/decreasing the product's quantity and what exactly is the problem that you are having in your attempts. — Eduardo Thales, Jun 16 '22 at 01:42
The problem is that nothing happens? The values are not increased nor decreased? That's the issue? — Osmanys Fuentes-Lombá, Jun 16 '22 at 01:44
is always showing error when i click on the button to either increase or decrease the quantity — Rengkat, Jun 16 '22 at 01:47

Mariusz Bartnik · Accepted Answer · 2022-06-16T09:05:37.027

1

Your increaseQuantity and decreaseQuantity functions are expecting to receive an id, which I assume should be a string.

const increaseQuanity = (id) => {
    dispatch({ type: "INCREASE_QUANTITY", payload: id });
  };
  const decreaseQuanity = (id) => {
    dispatch({ type: "DECREASE_QUANTITY", payload: id });
  };

But when you are executing then you are passing an item object.

Fix to reducers

if (action.type === "INCREASE_QUANTITY") {
    return {
      ...state,
      cart: state.cart.map((x) =>
        x.id === action.payload 
          ? ({...x, quantity: x.quantity + 1 })
          : x
      ),
    };
  }

edited Jun 16 '22 at 09:05

answered Jun 16 '22 at 06:57

Mariusz Bartnik

356
1
6

But even after adding the id, i still run through an error ` – Rengkat Jun 16 '22 at 08:25
I belive you have problem with your reducer as well. You are using map on cart array, which should include item objects. But inside map you are returning only quantity – Mariusz Bartnik Jun 16 '22 at 08:36
Can you please show me how am to fix the reducer? I have been confused and couldn't move to the next thing for over three days – Rengkat Jun 16 '22 at 08:48
I have just updated my answer. Please try to use something like that in your reducer – Mariusz Bartnik Jun 16 '22 at 09:07
Thanks a lot. Am very much relieve now. – Rengkat Jun 16 '22 at 09:56

Problem with increasing product quantity in the cart using usereducer (React)

1 Answers1