Why is my product Item not increasing or decreasing in my Reactjs

Question

I am creating an ecommerce product website, I am trying to add product increase and decrease dispatch function to increase or decrease product in the basket. I am using useContext api with reducer method.

But its not working kindly help me check the code to see what's wrong with it.

The reducer code for the increase/descrease product function

case 'INCREASE_PRODUCT': 
       // map through all the product
       const tempIncrease = state.basket.map((item) => {
       // if the item id is equal to the action basket it means that item it available
       if(item.id === action.id){
       // so show the item and the add 1 to the item 
       return {
          basket: {...item, quantity: item.quantity + 1}
          } 
         } else {
        // But if the item is not there, we return the item the way it is
             return item 
            }
        })

       return tempIncrease

case 'DEACREASE_PRODCUCT': 
        // map through all the product 
        const tempDecrease = state.basket?.map((item) => {
        // if the item id is equal to the action basket it it means that item it available
        if(item?.id === action?.basket?.id){
        // so show the item and then subtract 1 from the item 
        return  {...item, quantity: item?.quantity - 1}
        } else {
        // But if the item is not there, we return the item the way it is
            return item
          }
        })

       return tempDecrease

Here is my main products page where I created a default item.quantity so that when item is dispatched it will also dispatch item.quantity

<div className="product">
        {products?.length > 0 &&
          products?.map((item) => {
            // lets create a default item quantity
             item.quantity = 1;
            return (
              <div key={item?.id} className="product_items">
                <span className="product_promo">-20%</span>
                <Link className="product_link" to={`/product/${item?.id}`}>
                  <img src={item?.image} alt={item?.title} />
                </Link>
                <div className="product_info">
                  <p className="product_title">
                    {" "}
                    <Link to={`/product/${item?.id}`}>
                      {/** the Product title should have 22 letters */}
                      {item?.title?.substring(0, 22)}...
                    </Link>
                  </p>
                  <div className="product_flex1">
                    <h3>
                      $ <span>{item?.price}</span>
                    </h3>

                    <div className="product_rating">
                      {/** round up the Product rating to the nearest whole number */}
                      {Array(Math.round(item?.rating?.rate))
                        .fill()
                        .map(() => {
                          return (
                            <p className="product_star">
                              <Star />
                            </p>
                          );
                        })}
                    </div>
                  </div>
                </div>

                <div className="product_flex2">
                  <p className="product_cart">
                    <ShoppingCart className="product_shopIcon" />{" "}
                    <span
                      /** Dispatch product in to the basket when  Add to cart button is clicked */
                      onClick={() =>
                        dispatch({ type: "ADD_TO_BASKET", basket: item })
                      }
                    >
                      Add To Cart
                    </span>
                  </p>
                  <FavoriteBorder className="product_favoriteIcon" />
                </div>
              </div>
            );
          })}
      </div>

Here is my dispatch function in my checkout page where I want the increase and decrease functionality

<p className="checkout_price">
      $ <span>{item?.quantity * item?.price}</span>
      </p>

      <div className="checkout_counter">
      <RemoveIcon
       // onclick function to decrease product
       onClick={() =>
       dispatch({ type: "DECREASE_PRODUCT", basket: item })}
       className="checkout_icon"/>
       <p>{item?.quantity}</p>
        <AddIcon
        // onclick function to increase product
        onClick={() =>
        dispatch({ type: "INCREASE_PRODUCT", basket: item })
         }
        className="checkout_icon"/>

Each time I click the increase or decrease dispatch button, my product checkout page goes blank without without getting any errors in my console.log

why the product item is not increasing and decreasing?

score 0 · Answer 1 · answered Dec 28 '22 at 12:51

0

When you do tempIncrease = state.basket.map, it is the same reference to previous state.

Try

return {
  ...state,
  basket: // your calculation
}

answered Dec 28 '22 at 12:51

Shivam Jha

3,160
3
22
36

the problem still persist after I did what you asked me to do. return { ...state, basket: {...item, quantity: item?.quantity - 1} } – Temitope Omosebi Dec 28 '22 at 13:26
instead of `...item`, guess it should be `...state.basket` – Shivam Jha Dec 28 '22 at 13:29
Doesn't work still, the basket throw an error of undefined in the checkout page – Temitope Omosebi Dec 28 '22 at 13:55
Damn man, that was pseudo-code. In short, you need you use spreading state. See https://beta.reactjs.org/learn/updating-objects-in-state and https://beta.reactjs.org/learn/updating-arrays-in-state – Shivam Jha Dec 28 '22 at 13:58

Why is my product Item not increasing or decreasing in my Reactjs

1 Answers1