CODEWITHSUNDEEP
javascriptreactjsevent-handling
Karthik Pn
Karthik Pn

Reputation: 78

onClick handler in React is triggered by adjacent element , not by element which it was meant to trigger

const ProductScreen = () => {
  
  const [qty, setQty] = useState(0);
  
  const handleAddtoCart = () => {
    console.log(qty);
  };

  return (
    <div className="productScreen">
            {product.countInStock > 0 && (
              <div className="productScreen__details__qty">
                <span>Qty : </span>
                <select
                  id="qty"
                  name="qty"
                  value={qty}
                  onChange={(e) => setQty(e.target.value)}
                >
                  {[...Array(product.countInStock).keys()].map((x) => (
                    <option key={x + 1} value={x + 1}>
                      {x + 1}
                    </option>
                  ))}
                </select>
              </div>
            )}
            {product.countInStock > 0 ? (
              <div className="productScreen__details__price__details__cart">
                <button
                  className="productScreen__details__price__details__toCart"
                  onClick={handleAddtoCart()}
                >
                  Add to Cart
                </button>
              </div>
          </div>
</div>
  );
};

Here handleAddtoCart gets triggered when selecting options but doesnt trigger when button is pressed(handleAddtoCart is added to button), when I change handleAddtoCart() to handleAddtoCart in onClick attribute of button it works properly.

Why when handleAddtoCart() is given as onclick attribute it is getting triggered by adjacent select option and is not getting triggered when button is pressed

Upvotes: 0

Views: 1265

Answers (2)

LironShirazi
LironShirazi

Reputation: 441

You need to make a callback to that function, because every render of the component, will literally execute handleAddtoCart() and not as you expect it to happen only of the onClick trigger. as react's Offical documents explained:

To save typing and avoid the confusing behavior of this, we will use the arrow function syntax for event handlers here and further below:

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => console.log('click')}>
       {this.props.value}
     </button>
   );
 }
}

Notice how with onClick={() => console.log('click')}, we’re passing a function as the onClick prop. React will only call this function after a click. Forgetting () => and writing onClick={console.log('click')} is a common mistake, and would fire every time the component re-renders.

for more details: https://reactjs.org/tutorial/tutorial.html

Upvotes: 2

Eduardo.Daccio
Eduardo.Daccio

Reputation: 21

Change

onClick={handleAddtoCart()}

by

onClick={handleAddtoCart}

Also try with :

 onChange={(e) => setQty(e.currentTarget.value)}

instead of :

 onChange={(e) => setQty(e.target.value)}

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

Upvotes: 0

Related Questions