🖱️ Click Events

Click events are the foundation of user interaction. In React, `onClick` is the primary event handler for clicks.

Basic Click Handler

function Counter() {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

Passing Parameters to Click Handlers

function ButtonGroup() {
  const handleClick = (id) => {
    console.log("Button " + id + " clicked");
  };

  return (
    <div>
      <button onClick={() => handleClick(1)}>Button 1</button>
      <button onClick={() => handleClick(2)}>Button 2</button>
    </div>
  );
}

Click Event Object

The click event gives you access to mouse information:

function MouseInfo() {
  const handleClick = (e) => {
    console.log("X:", e.clientX, "Y:", e.clientY);
    console.log("Button:", e.button); // 0=left, 1=middle, 2=right
  };

  return <button onClick={handleClick}>Get Mouse Position</button>;
}

Multi-Click Patterns

<details>

<summary>Double Click</summary>

\`\`\`jsx

<button onDoubleClick={handleDoubleClick}>

Double Click Me

</button>

\`\`\`

</details>

<details>

<summary>Right Click (Context Menu)</summary>

\`\`\`jsx

const handleRightClick = (e) => {

e.preventDefault();

console.log("Right clicked");

};

<button onContextMenu={handleRightClick}>

Right Click Me

</button>

\`\`\`

</details>

✅ Key Takeaways

• Use `onClick` with **arrow functions** to pass parameters

• Access click data via the **event object** (clientX, clientY, button)

• **Double-click** uses `onDoubleClick`

• **Right-click** uses `onContextMenu` with `preventDefault()`