Event Handling
Click handling
Hello.js
import React from "react";
export default function Hello() {
const sayHello = () => {
console.log("Hello");
};
return <button onClick={sayHello}>Click Me!</button>;
}
EventHandler vs Calling a function
- Source: Codevolution
- EventHandler takes a function, NOT a function call
Hello.js
// WRONG Approach
<button onClick={sayHello ()}>Click Me!</button>;
// CORRECT Approach
<button onClick={sayHello}>Click Me!</button>;
- (WRONG Approach) In first case
sayHello
method is called on page load and will NOT be called on click events - (CORRECT Approach) In second case
sayHello
is triggered when a click event occurs on the button