Events & Forms

Every interactive React app is driven by events. React’s event system wraps native browser events in a consistent cross-browser interface called SyntheticEvent, letting you handle clicks, input changes, form submissions, and keyboard events with a unified API.

Synthetic Events

React registers a single event listener at the root of your app instead of attaching listeners to individual DOM nodes. When an event fires, React creates a SyntheticEvent wrapper with the same interface as a native event and dispatches it to the appropriate handler.

function ClickLogger() {
  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
    console.log(e.target);       // The DOM node that was clicked
    console.log(e.currentTarget); // The element the handler is attached to
    console.log(e.nativeEvent);   // The underlying browser event
  }

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

Event handlers are passed as props (camelCase: onClick, onChange, onKeyDown). Never use strings like the old onclick="..." attribute.

Inline vs Named Handlers

// Inline arrow function — fine for simple cases
<button onClick={() => setCount(c => c + 1)}>+</button>

// Named handler — better for complex logic or when you need the event object
function handleDelete(e: React.MouseEvent, id: string) {
  e.stopPropagation(); // Prevent event from bubbling up
  deleteItem(id);
}
<button onClick={(e) => handleDelete(e, item.id)}>Delete</button>

Controlled vs Uncontrolled Inputs

Uncontrolled inputs let the DOM manage their own state. You read the value when you need it (e.g., on submit) using a ref.

Controlled inputs keep the value in React state. React is always the source of truth, and the input always reflects that state.

// Controlled input
function ControlledInput() {
  const [value, setValue] = useState("");

  return (
    <input
      value={value}
      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}
    />
  );
}

// Uncontrolled input (accessed via ref on submit)
function UncontrolledInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  function handleSubmit() {
    console.log(inputRef.current?.value);
  }

  return <input ref={inputRef} defaultValue="" />;
}

Building a Controlled Form

type FormState = { email: string; password: string };

function LoginForm() {
  const [form, setForm] = useState<FormState>({ email: "", password: "" });
  const [error, setError] = useState("");

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
  }

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault(); // Prevent page reload
    if (!form.email.includes("@")) {
      setError("Please enter a valid email.");
      return;
    }
    submitLogin(form);
  }

  return (
    <form onSubmit={handleSubmit}>
      {error && <p className="error">{error}</p>}
      <input name="email" value={form.email} onChange={handleChange} type="email" />
      <input name="password" value={form.password} onChange={handleChange} type="password" />
      <button type="submit">Log in</button>
    </form>
  );
}

The e.preventDefault() call on form submission is essential — without it the browser navigates to the form’s action URL, reloading the page.

Common Events Quick Reference

Further Learning

Search these terms to go deeper:

• “React SyntheticEvent react.dev” — complete list of supported events and their TypeScript types
• “controlled vs uncontrolled components react.dev” — when to choose each approach
• “React Hook Form library” — the most popular library for handling forms without the controlled-input boilerplate
• “e.stopPropagation vs e.preventDefault React” — understanding event bubbling and default behavior
• “Josh W. Comeau forms in React” — practical guide with real-world form patterns

Events & Forms

Apps react to what users do: clicks, typing, submitting forms. In React, you handle these by passing a function to special props like onClick and onChange.

Handling events

Attach a handler by passing a function to a camelCase prop:

function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Note the names: onClick, onChange, onSubmit — always camelCase, and you pass an actual function (not a string).

Controlled inputs: React owns the value

The React way to handle a text box is to store its value in state and update it on every keystroke. React is the “single source of truth”:

function NameField() {
  const [name, setName] = useState('')
  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
  )
}

value={name} shows the state; onChange updates the state as you type. This is called a controlled input, and it’s what you’ll use most — it makes validation and formatting easy.

Building a form

Two important pieces: read the typed value from e.target.value, and stop the browser from reloading the page with e.preventDefault():

function LoginForm() {
  const [email, setEmail] = useState('')
  const [error, setError] = useState('')

  function handleSubmit(e) {
    e.preventDefault()  // stop the page from reloading
    if (!email.includes('@')) {
      setError('Please enter a valid email.')
      return
    }
    submitLogin(email)
  }

  return (
    <form onSubmit={handleSubmit}>
      {error && <p className="error">{error}</p>}
      <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" />
      <button type="submit">Log in</button>
    </form>
  )
}

Common events

In one sentence

Handle interactions with camelCase props (onClick, onChange, onSubmit), keep text inputs “controlled” by storing their value in state, and always call e.preventDefault() in form submit handlers to stop the page reloading.

Want to go deeper?

Switch to Expert mode above for synthetic events, controlled vs uncontrolled inputs, refs, and React Hook Form.