ReactJS->Variable not being updated outside of function

Question

So I'm working on a project where I want to have a shopping cart and inside of that shopping cart you can see the product's quantity and change it by clicking the buttons on the side of it. The problem is that the value of the quantity updated but it is not shown in the shopping cart and it doesn't seem to be taking an effect on the price at all. The quantity is being stored as an object and is updated in functions called upon pressing the buttons. Here's the releveant code: Those are my decrease and icnrease functions:

 const increaseQuantity=(product)=>{
        product.quantity+=1;


    }
    const decreaseQuantity=(product)=>{
        if(product.quantity<=1){
           alert('ERROR')
        }
        if(product.quantity>=1){
            product.quantity-=1;

        }

    }

and that is where I show the price within the map function:

{productsInCart.map(product=>    
            <div className='productsWrapper'>
                <p className='productName'>{product.name}</p>
                <img className='productImage' src={product.image}/>
                <p className='productPrice'>
                    <span className='productQuantity'>
                        <FaArrowLeft className='decreaseQuantity' size={20} onClick={()=>decreaseQuantity(product)}/>
                            <span className='quantity'>
                                {product.quantity}
                            </span>
                        <FaArrowRight className='increaseQuantity' size={20} onClick={()=>increaseQuantity(product)}/>
                    </span> Total: ${product.price*product.quantity}</p>
                <FaTrash className='removeProduct' size={25} onClick={()=>removeFromCart()}></FaTrash>
                <hr></hr>
                <span className='calculateTotal'>{totalSumDollars+=product.price}</span>       
            </div>)
            }

And this is where my products are being stored:

    const productssList=[
    {
        name: 'Product 2',
        image: MissingImage,
        price: 5.50,
        quantity: 1,
        id: 0
    },
    {
        name: 'Product 1',
        image: MissingImage,
        price: 3.40,
        quantity: 1,
        id: 1
    },

Does the quantity update here <span className='quantity'> {product.quantity} </span> when you increase and decrease? — Chamal Perera
– Chamal Perera, Commented Nov 24, 2020 at 7:23

Chamal Perera · Accepted Answer · 2020-11-24 07:36:37Z

1

You are not updating the productsInCart object when you are increasing and decreasing quantity. You need to update the quantity in productsInCart. See below code.

return cartItems.map((cartItem) =>
  cartItem.id === cartItemToAdd.id
    ? { ...cartItem, quantity: cartItem.quantity + 1 }
    : cartItem
);

For your case.

const increaseQuantity=(product)=>{
        return productsInCart.map((cartItem) =>
          cartItem.id === product.id
          ? { ...cartItem, quantity: cartItem.quantity + 1 }
          : cartItem
  );
}

edited Nov 24, 2020 at 7:36

answered Nov 24, 2020 at 7:26

Chamal Perera

3131 gold badge2 silver badges10 bronze badges

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

Comments

Yashpal S · Accepted Answer · 2020-11-24 07:16:39Z

0

I think you should go and use useState hook here. https://reactjs.org/docs/hooks-state.html. If you are already using the useState hook, make sure you immutable the array with spread or other methods.

edited Nov 24, 2020 at 7:16

answered Nov 24, 2020 at 7:14

Yashpal S

3295 silver badges21 bronze badges

2 Comments

Python_Mython79 Over a year ago

I've thought of that but I am using a class component, I'm not sure if i can use hooks within class components

Yashpal S Over a year ago

If you are using a class component you can use the state and then dont forget that you immutable the array with spread or other methods reactjs.org/docs/state-and-lifecycle.html

Collectives™ on Stack Overflow

ReactJS->Variable not being updated outside of function

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related