Synthetic Events

import React from 'react';

export default function EventDemo() {
  const handleLinkClick = (e) => {
    // In React, returning 'false' does NOT work.
    // You must explicitly call preventDefault.
    e.preventDefault();
    console.log("Link was clicked, but we didn't navigate!");
    
    // 'e' is a SyntheticEvent. 
    // If you ever desperately need the real browser event:
    console.log("Native Event details:", e.nativeEvent);
  };

  const handleDivClick = (e) => {
    console.log("Div was clicked!");
  };

  const handleButtonClick = (e) => {
    // Stops the event from bubbling up to the div
    e.stopPropagation();
    console.log("Button was clicked!");
  };

  return (
    // Event bubbling still works perfectly with Synthetic Events
    <div onClick={handleDivClick} className="p-8 border-2 border-dashed border-gray-400">
      <h3>Parent Div</h3>
      <p>Clicking the button will NOT trigger the Div's onClick, because of stopPropagation.</p>
      
      <button onClick={handleButtonClick} className="bg-blue-500 text-white p-2 rounded mr-4">
        Click Me
      </button>

      <a href="https://google.com" onClick={handleLinkClick} className="text-blue-600 underline">
        Fake Google Link
      </a>
    </div>
  );
}