Event Handling in React

Capture and handle user interactions in React using event handlers and synthetic events.

Click events

tsx

function SaveButton() {
  const handleSave = () => {
    console.log('Saved');
  };

  return <button onClick={handleSave}>Save</button>;
}

Input events

tsx

<input onChange={e => console.log(e.target.value)} />

Form submit handling

tsx

function LoginForm() {
  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // submit logic
  };

  return <form onSubmit={onSubmit}>{/* fields */}</form>;
}

Event handling tips

Pass function reference, not invocation
Use preventDefault for custom form behavior
Keep handlers small and delegate logic to helper functions

Next, we will render UI conditionally.