React Events | React Tutorial

Interactivity is what separates a modern web application from a static document, and in React you handle user actions — clicks, hovers, keystrokes, form submissions — through its event system. Rather than gluing generic <script> tags onto markup, you attach the function that should run directly on the JSX element it belongs to.

Something like <button onClick={handleClick}> keeps the UI structure and the behavior that responds to it defined in exactly the same place, which is what makes React's approach declarative.

React event names must be written in camelCase — onClick, onMouseOver, onChange — rather than the all-lowercase onclick that plain HTML uses; the lowercase version triggers a console warning and is silently ignored.

You also assign the actual function reference rather than a string of code, and critically without parentheses (onClick={handleClick}, not onClick={handleClick()}), since calling it would run the function immediately during render instead of waiting for the click.

Whenever an event fires, React hands your handler a SyntheticEvent rather than the browser's raw native event object. This is a cross-browser wrapper that guarantees the event behaves identically whether the user is on Chrome, Firefox, Safari, or Edge.

It still exposes the same familiar interface native events provide, including e.target, e.type, e.preventDefault(), and e.stopPropagation(), so you rarely need to think about which browser is running your code.

Elements like <form> have default browser behavior built in — submitting one reloads the entire page, which in a React single-page app would wipe out all of your component state in an instant.

Calling e.preventDefault() inside the submit handler stops that native reload from happening, letting your own submission logic — like sending data to an API — run without losing anything the user had on screen.

DOM events bubble upward: clicking a button nested inside a <div> fires the button's onClick first, then the div's onClick immediately after — which causes real bugs if the div opens a modal while the button is meant to delete an item.

Calling e.stopPropagation() inside the inner handler stops the event from continuing to bubble up, so the parent's handler never fires for that click.

Text inputs use onChange rather than onClick, and it fires on every single keystroke, not just once when the field loses focus. The value the user just typed lives on e.target.value.

Reading that value inside the handler is the fundamental mechanism behind Controlled Components, where a React state variable drives exactly what the input currently displays.

To pass extra data to a handler, like the ID of the item a button should delete, you can't call the function directly in JSX — onClick={deleteUser(id)} would run it immediately during render, not on click.

Instead, wrap it in an inline arrow function, onClick={() => deleteUser(id)}, so the call to deleteUser only actually happens once the click event occurs.

Putting it together: React events are always camelCase, handlers receive a cross-browser SyntheticEvent object, e.preventDefault() stops unwanted native behavior like form reloads, and e.stopPropagation() stops an event from bubbling up to parent elements.

Once the logic inside a handler grows beyond a line or two, it's worth extracting it into a named function defined above your component's return statement, keeping the JSX itself focused purely on structure.

A quick gut-check on the essentials covered so far: the value typed into an input is read from e.target.value inside an onChange handler, not from some other shorthand or a separate callback argument.

That exact path is worth memorizing, since it's the mechanism every controlled input in React depends on, whether it's a simple search box or a full multi-field form.

With event handling covered — attaching handlers declaratively, reading the SyntheticEvent, preventing default behavior, and stopping propagation — the next step is connecting these events to component memory.

React State, via useState, is what actually lets an event handler change what's on screen, turning a click or keystroke into a visible update rather than just a logged message.

Interactivity with Events. Welcome to React Events. Interactivity is what separates a modern web application from a static document. In React, we handle user actions—like clicks, hovers, keyboard typing, and form submissions—using Events. React's event system is designed to be highly declarative, allowing you to attach JavaScript functions directly to your JSX elements.

camelCase Naming. The first major difference between React events and standard HTML events is naming. In pure HTML, event names are entirely lowercase (e.g., onclick, onmouseover). In React, all events MUST be written in camelCase (e.g., onClick, onMouseOver, onChange). If you use the lowercase version, React will throw a console warning and ignore the event completely.

Functions, Not Strings. The second major difference is how you assign the handler. In legacy HTML, you pass a string of JavaScript code (onclick="doSomething()"). In React, you pass the actual JavaScript function reference using curly braces (onClick={doSomething}). DO NOT add parentheses at the end (doSomething()), or the function will execute instantly when the component renders, instead of waiting for the click!

Which of the following is the correct way to attach a saveData function to a button click in React?

• →<button onclick="saveData()">
• →<button onClick={saveData()}>
• →<button onClick={saveData}>

SyntheticEvents. When an event triggers, React passes an 'event object' (usually denoted as e or event) to your handler function. This isn't the raw browser event. It is a React 'SyntheticEvent'. It's a cross-browser wrapper that ensures the event object behaves exactly the same way whether the user is on Chrome, Firefox, Safari, or Edge. It has the same interface as native events, including e.stopPropagation() and e.preventDefault().

Preventing Default. Certain HTML elements have default behaviors built into the browser. The most common is the <form> element, which will automatically refresh the entire page when a <button type="submit"> is clicked. In a React Single Page Application (SPA), a page refresh wipes out all your state! You must call e.preventDefault() inside your handler to stop the browser from reloading.

If you have a form that triggers a full page refresh when submitted, wiping out all your React state, what method did you forget to call?

• →e.stopPropagation()
• →e.preventDefault()

Stopping Propagation. Events in the DOM 'bubble' upwards. If you click a <button> that is inside a <div>, the button's onClick fires first, but then the div's onClick will fire immediately after! This can cause severe bugs if the div handles navigation and the button handles deletion. To prevent an event from bubbling up to parents, use e.stopPropagation().

Form Inputs (onChange). While buttons use onClick, text inputs use onChange. The onChange event fires *every single time* a user types a keystroke. To capture what they actually typed, you access e.target.value. This is the fundamental mechanism for building Controlled Components (where React state drives the input value).

If you have an onChange event triggered by an <input>, how do you access the string the user just typed?

• →e.text
• →e.data
• →e.target.value

Passing Arguments. Often, you need to pass extra data to an event handler, like the ID of the specific item you want to delete. Because you cannot execute the function directly in the JSX (e.g., onClick={deleteUser(id)} is wrong), you must wrap it in an inline arrow function: onClick={() => deleteUser(id)}.

Arguments + Event Object. What if you need to pass a custom argument AND you still need access to the SyntheticEvent object (for example, to stop propagation)? You simply pass e into the arrow function, and then hand it down to your handler alongside your custom arguments.

If you need to call updateItem(itemId) on click, AND call e.preventDefault(), which syntax is correct?

• →onClick={updateItem(itemId, e)}
• →onClick={(e) => { e.preventDefault(); updateItem(itemId); }}

Separation of Handlers. While inline arrow functions are convenient, putting massive blocks of logic inside your JSX makes the component unreadable. Best practice dictates that complex logic should be extracted into a named function defined above your return statement. Keep the JSX purely focused on the UI structure.

Mastery Achieved. Interactivity mastered! You understand camelCase naming, passing function references, the SyntheticEvent system, stopping propagation, and handling inputs. You are now ready to tie these events to dynamic variables using React State (useState) to build truly reactive applications.