How to Stop Propagation in React: Simple Guide

In React, you stop event propagation by calling event.stopPropagation() inside your event handler. This prevents the event from bubbling up to parent elements, so only the targeted element responds to the event.

Syntax

Use event.stopPropagation() inside an event handler function to stop the event from bubbling up the DOM tree.

• event: The event object passed to the handler.
• stopPropagation(): A method that stops the event from propagating to parent elements.

javascript

function handleClick(event) {
  event.stopPropagation();
  // Your code here
}

Example

This example shows two nested buttons. Clicking the inner button stops the click event from reaching the outer button, so only the inner button's message appears.

javascript

import React from 'react';

export default function StopPropagationExample() {
  function outerClick() {
    alert('Outer button clicked');
  }

  function innerClick(event) {
    event.stopPropagation();
    alert('Inner button clicked');
  }

  return (
    <button onClick={outerClick} style={{ padding: '20px', fontSize: '16px' }}>
      Outer Button
      <button onClick={innerClick} style={{ marginLeft: '10px', fontSize: '14px' }}>
        Inner Button
      </button>
    </button>
  );
}

Output

When clicking the Inner Button, alert shows: 'Inner button clicked' only.
When clicking the Outer Button (outside inner), alert shows: 'Outer button clicked'.

Common Pitfalls

One common mistake is forgetting to call event.stopPropagation(), which causes parent handlers to run unexpectedly. Another is calling it on the wrong event or outside the handler, which has no effect.

Also, using event.preventDefault() is different; it stops default browser actions but does not stop propagation.

javascript

function wrongHandler(event) {
  // This does NOT stop propagation
  // event.preventDefault();
  alert('Clicked');
}

function correctHandler(event) {
  event.stopPropagation(); // Stops bubbling
  alert('Clicked');
}

Quick Reference

Method	Purpose
event.stopPropagation()	Stops event from bubbling to parent elements
event.preventDefault()	Prevents default browser action (not propagation)
event.nativeEvent.stopImmediatePropagation()	Stops other handlers of the same event on the same element (rarely needed)

Key Takeaways

Use event.stopPropagation() inside React event handlers to stop event bubbling.

Stopping propagation prevents parent elements from reacting to the same event.

Do not confuse stopPropagation() with preventDefault(); they serve different purposes.

Always call stopPropagation() inside the event handler function with the event object.

Test your event handlers to ensure propagation stops as expected.