How to prevent outer function call in reactjs

Question

Here is my react Code.

OuterOne = () => {
  alert("outer calling")
}

InnerOne = (ev) => {
  ev.stopPropagation()
  alert("here")
  console.log(ev.target)
}

<div onRightClick={()=>this.OuterOne()}>
   Outer
   <br/>
   <div onRightClick={(ev)=>this.InnerOne(ev)} style={{ margin:"10px" }}>
     INner
   </div>
</div>

I have two functions.

One is Inner and another is Outer . When i am calling Inner it calling the outer function because Inner div is wrapped inside outer div.

I wants to call only inner when i am clicking inner and outer function when clicking outer div.

The same i tested with javascript it is working, but not working with react.js

Is there any way to achive this ?

Please have a look.

Answer 1

It's working perfectly fine.

import React from 'react';

const App: React.FC = () => {
  const OuterOne = (e) => {
    e.preventDefault();
    e.stopPropagation();
    alert('outer calling');
  };

  const InnerOne = (e) => {
    e.preventDefault();
    ev.stopPropagation();
    alert('here');
    console.log(e.target);
  };

  return (
    <div>
      <div onContextMenu={OuterOne}>
        Outer
        <br />
        <div
          onContextMenu={InnerOne}
          style={{ margin: '10px' }}
        >
          Inner
        </div>
      </div>
    </div>
  );
};

export default App;

Here's on on the class based component:

import React from 'react';

class App extends React.Component{
  OuterOne = (e) => {
    e.preventDefault();
    e.stopPropagation();
    alert('outer calling');
  };

  InnerOne = (e) => {
    e.preventDefault();
    e.stopPropagation();

    console.log(e.button);
    alert('here');
    console.log(e.target);
  };

  render() {
    return (
      <div>
        <div onContextMenu={this.OuterOne}>
          Outer
          <br />
          <div
            onContextMenu={this.InnerOne}
            style={{ margin: '10px' }}
          >
            Inner
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Just use onContextMenu instead of onRightClick .

Here, check it out, it's in class based example.

Answer 2

As stated by Ajay Dabas the onRightClick is not recognized i edited and used onClick handler and it works fine

OuterOne = () => {
    alert("outer calling")
}

InnerOne = (ev) => {
    ev.stopPropagation()
    alert("here")
    console.log(ev.target)
}
render() {
    return (
        <div onClick={() => this.OuterOne()}>
            Outer
 <br />
            <div onClick={(ev) => this.InnerOne(ev)} style={{ margin: "10px" }}>
                INner
 </div>
        </div>
    )
}