How to call stopPropagation in reactjs?

Reactjs

Reactjs Problem Overview


I want to stop the click event from bubling up. Therefore I added e.stopPropagation() in my code. I always get a mistake in the console, that says: Uncaught TypeError: e.stopPropagation is not a function

What is the right way to set the stopPropagation in reactjs?

      handleClick: function(index, e) {
        e.stopPropagation();

        ...

    }, 

Reactjs Solutions


Solution 1 - Reactjs

The right way is to use .stopPropagation,

var Component = React.createClass({
  handleParentClick: function() {
  	console.log('handleParentClick');
  },
  
  handleChildClick: function(e) {
  	e.stopPropagation();
    
  	console.log('handleChildClick');
  },
  
  render: function() {
    return <div onClick={this.handleParentClick}>
      <p onClick={this.handleChildClick}>Child</p>
    </div>;
  }
});

Example

> Your event handlers will be passed instances of SyntheticEvent, a > cross-browser wrapper around the browser's native event. It has the > same interface as the browser's native event, including > stopPropagation() and preventDefault(), except the events work > identically across all browsers. > Event System

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionvuvuView Question on Stackoverflow
Solution 1 - ReactjsOleksandr T.View Answer on Stackoverflow