How to fix preventDefault() not working on event in synthetic event handler in React

// ❌ Wrong - calls the function immediately
<button onClick={handleClick()}>Click me</button>

// ✅ Correct - passes function reference
<button onClick={handleClick}>Click me</button>

// ✅ Also correct - arrow function with explicit event
<button onClick={(e) => handleClick(e)}>Click me</button>

<button onClick={(e) => handleClick(e, additionalArg)}>
  Click me
</button>

// ✅ Correct function component
function MyComponent() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted');
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

// ✅ Correct class component with binding
class MyComponent extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted');
  }

  render() {
    return <form onSubmit={this.handleSubmit}>...</form>;
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    console.log('Form submitted');
  }

  render() {
    return <form onSubmit={this.handleSubmit}>...</form>;
  }
}

// React < 17 only
const handleClick = (e) => {
  e.persist(); // Remove event from pool

  setTimeout(() => {
    console.log(e.type); // Now accessible
    e.preventDefault(); // Now works
  }, 100);
};

// React 17+ - preventDefault must be called synchronously
const handleClick = (e) => {
  e.preventDefault(); // Call immediately

  setTimeout(() => {
    // Can access event properties, but preventDefault
    // must have been called before async operation
    console.log(e.type);
  }, 100);
};

const handleSubmit = (e) => {
  e.preventDefault(); // Call synchronously

  const formData = new FormData(e.target);
  const inputValue = e.target.elements.username.value;

  // Now safe to use in async operations
  setTimeout(() => {
    submitData(inputValue);
  }, 100);
};

// Or with async/await
const handleSubmit = async (e) => {
  e.preventDefault(); // Call before any await

  const data = {
    name: e.target.name.value,
    email: e.target.email.value
  };

  await fetch('/api/submit', {
    method: 'POST',
    body: JSON.stringify(data)
  });
};

// Form submission events
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
};

// Click events
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  e.preventDefault();
};

// Keyboard events
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
  if (e.key === 'Enter') {
    e.preventDefault();
  }
};