React Preventing Default Behavior

In the last lesson you learned about React Mouse Events, so you can listen for clicks and hovers. This lesson is about stopping the built-in things the browser does on its own, like a form reload, using one small method called e.preventDefault().

🤔 What is “default behavior”?

Some HTML elements come with a built-in action that the browser does automatically. You did not write any code for it.

• A <form> submits and reloads the whole page. That’s its default.
• A link <a href="..."> navigates away to the URL. That’s its default.
• A right-click opens the browser’s context menu. Again, default.

So default behavior is the action the browser performs on its own, without you asking. Most of the time in React that default gets in your way, because you want to handle the submit or the click yourself in your own code.

🛑 What e.preventDefault() does

When an event fires, React hands your function an event object. People usually call it e, and it carries a useful method called preventDefault.

• You call e.preventDefault() inside your event handler.
• It tells the browser: do not run your built-in action for this event.
• So the form does not reload. The link does not navigate. Nothing default happens.
• Your own code still runs normally. You just turned off the browser’s part.

Here’s the smallest example. The browser would normally open its right-click menu, but this stops it.

function Box() {
  function handleRightClick(e) {
    e.preventDefault(); // stops the browser menu from opening
    console.log("Custom right-click handled");
  }

  return <div onContextMenu={handleRightClick}>Right-click me</div>;
}

The e is the event object React passed in. Calling e.preventDefault() cancels just the default action. Your console.log still runs, so you’re free to do whatever you want instead.

📋 The most common case: form onSubmit

By far the place you’ll use this every day is a form. Let’s see the problem first, then the fix.

• A form has a default action. When you submit it, the browser reloads the page.
• A reload means React unmounts and your state is gone. The page flashes white.
• You almost never want that in React. You want to grab the typed values and handle them in JavaScript.

This pair shows a form without preventDefault versus with it. The ❌ version reloads and loses everything. The ✅ version stays put and runs your code.

import { useState } from "react";

// ❌ No preventDefault - the page reloads and the typed name is lost
function SignupForm() {
  const [name, setName] = useState("");

  function handleSubmit(e) {
    console.log("Name is", name); // page reloads before you can use this
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">Sign up</button>
    </form>
  );
}

// ✅ With preventDefault - no reload, your code runs cleanly
function SignupForm() {
  const [name, setName] = useState("");

  function handleSubmit(e) {
    e.preventDefault(); // stop the page from reloading
    console.log("Name is", name); // now this actually runs and works
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">Sign up</button>
    </form>
  );
}

Let’s walk through the ✅ version on a click.

• You type a name, so name in state holds what you typed.
• You click “Sign up”, which fires the form’s onSubmit.
• e.preventDefault() runs first and cancels the reload.
• Then console.log("Name is", name) runs and you have the value in your hands.

Name is Riya

🔗 Another case: a link with custom behavior

Forms are not the only place. A link is the other classic one, where clicking it should run your own code instead of jumping to a new page.

• A real <a href="..."> navigates to that URL by default.
• Maybe you’d rather open a popup, log the click, or move the user with React Router.
• So you call e.preventDefault() to stop the jump, then do your own thing.

Here a link cancels its normal navigation and shows a message instead.

function HelpLink() {
  function handleClick(e) {
    e.preventDefault(); // stop the browser from going to /help
    alert("Opening help in a popup instead");
  }

  return (
    <a href="/help" onClick={handleClick}>
      Need help?
    </a>
  );
}

The href="/help" is still there for accessibility and for people who open the link in a new tab. But on a normal click, e.preventDefault() cancels the jump, so the browser stays on the page and your alert runs instead.

🔀 preventDefault vs stopPropagation

These two get mixed up a lot, so let’s make the difference clear. They sound similar but do completely different jobs.

• e.preventDefault() stops the browser’s default action for the event. Like a form reload or a link jump.
• e.stopPropagation() stops the event from bubbling up to parent elements. The parent’s handler never fires.
• They are not opposites and not the same. You can call one, the other, both, or neither.

This example shows both on a button inside a clickable card.

function Card() {
  function handleCardClick() {
    console.log("Card clicked");
  }

  function handleButtonClick(e) {
    e.stopPropagation(); // the card's click handler will NOT run
    console.log("Button clicked only");
  }

  return (
    <div onClick={handleCardClick}>
      <button onClick={handleButtonClick}>Delete</button>
    </div>
  );
}

Here’s what’s going on in that example.

• Without stopPropagation, clicking the button also triggers the card’s onClick, because the click bubbles up from the button to its parent div.
• With it, only the button’s handler runs.
• This has nothing to do with a default browser action, so preventDefault would not help here. Different problem, different tool.

⚠️ A couple of things to watch out for

A few small mistakes trip people up with preventDefault. Keep these in mind.

• Call it inside the handler, not outside. It only works while the event is happening.
• Make sure your function actually receives e. Write function handleSubmit(e), then use e.preventDefault().
• It only cancels the default action. It does not stop your own code, and it does not stop bubbling. For bubbling you need stopPropagation.

This shows the common slip: forgetting to accept the event argument.

// ❌ No e in the parameters - e.preventDefault() will crash
function handleSubmit() {
  e.preventDefault(); // "e is not defined"
}

// ✅ Accept the event object, then call preventDefault on it
function handleSubmit(e) {
  e.preventDefault();
}

The browser passes the event to your handler automatically, but only if you give it a parameter to land in. No e in the parentheses means no event object to call preventDefault on.

🧩 What You’ve Learned

• ✅ Default behavior is the action the browser does on its own, like a form reload or a link jump
• ✅ e.preventDefault() cancels that built-in action so you can handle the event in your own code
• ✅ The event object e is passed to your handler automatically, as long as you accept it as a parameter
• ✅ The most common use is a form’s onSubmit, to stop the page from reloading and losing your state
• ✅ It also works on links, to stop navigation and run custom behavior instead
• ✅ preventDefault stops the browser’s default action; stopPropagation stops the event bubbling to parents - they are different tools

🚀 What’s Next?

Now you can stop the browser’s default actions and handle events fully in your own code. Next you’ll learn how to show or hide parts of your UI based on conditions, like only showing a welcome message when the user is logged in.

React Conditional Rendering