Event Handling

How to respond to user interactions like clicks, inputs, and form submissions.

React3 min readConcept 10 of 46

What it is

React allows you to respond to user interactions by attaching **event handlers** directly to JSX elements.

Instead of lowercase HTML attributes like onclick, React uses camelCase props like onClick, onChange, and onSubmit.

Why it matters

Without event handlers, your UI is completely static. Event handlers are the bridge between the user's actions and your component's logic.

React normalizes these events across all browsers, so an onClick behaves exactly the same in Chrome, Firefox, and Safari without you having to write browser-specific workarounds.

How to use it

You define a function inside your component, usually starting with the word handle (e.g., handleClick or handleSubmit).

You then pass that function as a prop to a JSX element: <button onClick={handleClick}>.

The Click Trap

Test the buttons below. The first button passes a function call (with parentheses). The second button passes a function reference.

// ❌ Parentheses execute the function IMMEDIATELY
// during the render phase. This often causes an
// infinite render loop and crashes your app!
<button onClick={fireLasers()}>
Fire (Broken)
button>
 
// ✅ No parentheses. Passes a reference so
// React can call it later when clicked.
<button onClick={fireLasers}>
Fire (Fixed)
button>
 
// ✅ Arrow function. Also passes a reference.
// Useful if you need to pass arguments.
<button onClick={() => fireLasers(100)}>
Fire (With Args)
button>
TerminalRenders: 0

Notice how the broken function executed the moment the component appeared on screen. The fixed buttons wait patiently for your click.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What is the correct syntax for adding a click handler to a button in React?
  2. 2Why is `<button onClick={doSomething()}>` a bug?
  3. 3How do you stop a form submission from refreshing the entire page in React?

Remember this

  • Event names are camelCase in React (onClick, onChange).
  • Pass a function reference, not a function call (no parentheses).
  • If you need to pass arguments, wrap the call in an arrow function: onClick={() => deleteItem(id)}.
  • Call e.preventDefault() for forms and links that shouldn't trigger browser navigations.

Done with this concept?

Mark it complete to track your progress. No login needed.