ReactJS UI Does Not Update The State

Question

I am trying to make a simple e-commerce app. When a user goes to cart section and try to increase or decrease quantity, it changes the state but remains same on the page. I need to go back and go cart again to update. How can it change dynamically?


function CardItem() {
    const {cart, setCart} = useContext(ProductContext)

    const addQuantity = (cartItem) => {
      return cart.map((item) => (
        cartItem.id === item.id ? item.quantity = item.quantity + 1 : item
      ))
    }

    const removeQuantity = (cartItem) => {
        cart.map((item) => (
          cartItem.id === item.id ? item.quantity = item.quantity - 1 : item
        ))
      }

  return (
            {
              cart.map((cartItem) => (
                <tr key={cartItem.id}>
   
                <td class="quantity__item">
                  <div class="quantity">
         <div class="pro-qty-2 d-flex align-items-center justify-content-center text-center">
                     <button className='increase' onClick={() => removeQuantity(cartItem)}>
                     -</button>
                     {cartItem.quantity}
                     <button className='increase' onClick={() => addQuantity(cartItem)}>+</button>
                     </div>
                   </div>
            </td>
        </tr>
      ))
  })}

You're not using `setCart` anywhere in that code so _"it changes the state"_ doesn't make sense in this context. — Andy, May 18 '22 at 15:22

Drew Reese · Answer 1 · 2022-05-18T16:15:31.730

Issue

The code in your snippet isn't calling setCart to update any state.
The add/remove quantity handlers are just mutating the cart state object. Don't mutate React state.

Solution

Use the setCart state updater function to enqueue a state update to trigger a rerender to view the updated state. Use a functional state update to correctly update from the previous state and remember that you should shallow copy any state that is being updated.

Example:

function CardItem() {
  const { cart, setCart } = useContext(ProductContext);

  const addQuantity = (cartItem) => {
    setCart(cart => cart.map(item => cartItem.id === item.id
      ? {                            // <-- new item object reference
        ...item,                     // <-- shallow copy item
        quantity: item.quantity + 1, // <-- update property
      }
      : item
    ));
  };

  const removeQuantity = (cartItem) => {
    setCart(cart => cart.map(item => cartItem.id === item.id
      ? {
        ...item,
        quantity: item.quantity - 1,
      }
      : item
    ));
  };

  return (
    {cart.map((cartItem) => (
      <tr key={cartItem.id}>
        <td class="quantity__item">
          <div class="quantity">
            <div class=" .... ">
              <button className='increase' onClick={() => removeQuantity(cartItem)}>
                -
              </button>
              {cartItem.quantity}
              <button className='increase' onClick={() => addQuantity(cartItem)}>
                +
              </button>
            </div>
          </div>
        </td>
      </tr>
    ))
  });
}

Since adding/removing is essentially the same action, it's common to use a single function to handle both and pass in the quantity you want to adjust by.

function CardItem() {
  const { cart, setCart } = useContext(ProductContext);

  const addQuantity = (id, amount) => () => {
    setCart(cart => cart.map(item => cartItem.id === id
      ? {
        ...item,
        quantity: item.quantity + amount,
      }
      : item
    ));
  };

  return (
    {cart.map((cartItem) => (
      <tr key={cartItem.id}>
        <td class="quantity__item">
          <div class="quantity">
            <div class=" .... ">
              <button
                className='increase'
                onClick={addQuantity(cartItem.id, -1)}
              >
                -
              </button>
              {cartItem.quantity}
              <button
                className='increase'
                onClick={addQuantity(cartItem.id, 1)}
              >
                +
              </button>
            </div>
          </div>
        </td>
      </tr>
    ))
  });
}

Thank you for help, it worked pretty well :) – Coding Kitty May 18 '22 at 16:32 — Coding Kitty, May 18 '22 at 16:32
@CodingKitty Welcome, glad to help. Cheers and good luck! – Drew Reese May 18 '22 at 16:34 — Drew Reese, May 18 '22 at 16:34

score 0 · Answer 2 · answered May 18 '22 at 15:43

I will recommend using reducers with context to manage state. Something like below a new CartReducer with ADD and REMOVE item etc. actions

const [state, dispatch] = useReducer(CartReducer, initalState);

const addToCart = (id) => {
dispatch({ type: ADD, payload: id});
};

const showHideCart = () => {
dispatch({ type: SHOW, payload:'' });
};

const removeItem = (id) => {
dispatch({ type: REMOVE, payload: id });
};

You can refer this project if it helps shopping-cart-with-context-api

ReactJS UI Does Not Update The State

2 Answers2

Issue

Solution