Why my code adds element in array on the next click in React-javascript

Question

I am learning and practicing react for sometime. But came upon a weird problem. I'm making a small e-commerce application (step by step with tutorial).

const addToCart = (id) => {
      
       let tempProduct = storeProduct;
       const index = tempProduct.indexOf(getItem(id));
       const product = tempProduct[index];
       product.inCart=true;
       product.count = 1;
       product.total = product.price;
       setCart([...cart,product]);
       setStoreProduct(tempProduct);
       console.log(cart)
   
  };

storeProduct is an array of objects that are the products in my application.

Called this function onClick on a button. It takes the element by id and makes some changed in the data. Then should add that element in the cart which is an array. But on the first click, the cart is empty. On the second click, the first clicked element gets into cart and so on. What is the problem here?

I imagine bot setCart and setStoreProduct come from React.useState(). So check the linked SO question — Borjante, Apr 26 '21 at 18:55
@Borjante link will help you. By the way you can log the new cart data by using React.useEffect(() => console.log(cart), [cart]). — Alexandre Nicolas, Apr 26 '21 at 18:58
setStoreProduct is perhaps doing nothing, because you are setting the same value. — Alexandre Nicolas, Apr 26 '21 at 19:00
@Kornflexx its is showing actual cart from useEffect. But why? — Talha, Apr 26 '21 at 19:35

Why my code adds element in array on the next click in React-javascript

0 Answers0