there is lag in my react app on a add to card button-CodePudding

I don't know why my react app is lagging after clicking on add to cart button, It takes multiple clicks to add a product into the cart.

following are the app.js file and products.jsx file where the contexts are being consumed The logic is working very well but the only problem is the lag after clicking the add to cart button. Here is the link for codesandbox so that you can get a clear idea about my problem

click here to access codesandbox of my react app

CodePudding user response：

There is no lag. The problem is that inside the Product.jsx, the onClick is inside the span instead of the button and the span doesn't occupy the whole button. When you click the button (the outer part which the span doesn't reach), no function is called. But on the chance that you click on the inner part, the onClick of the span is called.

tldr; move the onClick from the span to the button.

<button className="product-add-button" onClick={() => handleAddProduct(productItems)}>
  {" "}
  <span>
    {" "}
    <FaShoppingCart
      color="green"
      fontSize="25px"
      className="but-cart"
      />{" "}
    Add to cart
  </span>
</button>