Episode 7 of 32

Click Events

Handle user interactions with click events and event handlers in React.

React handles events using camelCase event attributes.

Basic Click Handler

const handleClick = () => {
  console.log("Button clicked!");
}

return <button onClick={handleClick}>Click me</button>;

Passing Arguments

const handleClickAgain = (name) => {
  console.log("Hello " + name);
}

return <button onClick={() => handleClickAgain("Mario")}>
  Click me
</button>;

The Event Object

const handleClick = (e) => {
  console.log(e.target);  // the element clicked
}
return <button onClick={handleClick}>Click</button>;