How to call stopPropagation in reactjs?

Question

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();

        ...

    }, 

Answer 1

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

Answer 2

export default function myComponent(){

    //buttonClicked:
    const buttonClicked = (e) => {
        e.stopPropagation();
        // your code here...
    }

    //return:
    return (
        <div>
            <input type='button'
                onClick={ (e) => buttonClicked(e) }
            ></input>
        </div>
    )

}