ReactJS, event.currentTarget doesn't have the same behavior as Vanilla Javascript

Question

I was wondering if something like event.currentTarget exists in ReactJS, the problem using event.target onclick is that I get the childDiv instead of the parentDiv.

Vanilla Javascript example:

document.getElementById("parentDiv").onclick = function() {
    console.log(event.currentTarget.id); // or this.id
    console.log(event.target.id);
};

<div id="parentDiv">Parent (click me)
    <div id="childDiv">Child (then click me)</div>   
</div>

ReactJS, (inside a stateless function):

...
const myFunction = (event) => {  
    event.stopPropagation(); // Doesn't make a difference.
    console.log(event.target); // Not trying to get the child element
    console.log(this); // 'this' is undefined
    console.log(event.currentTarget); // Gets the '#document' element
};
...
<div onClick={() => myFunction(event)}>...</div>
...

I'm sure there are multiple solutions for something this basic, I'm surprised I couldn't find a thread talking about this. Any suggestions?

Answer 1

First of all you are not actually passing the event, not sure if this is a typo but it should error.

This:

onClick={() => myFunction(event)}>...</div>

Should be written like this:

onClick={(event) => myFunction(event)}>...</div>

Second, you don't need to pass a new function, just pass the reference to the already existing function myFunction.

<div onClick={myFunction}>

As you can see in the following snippet the code runs as expected:

It will print:

<div>click me</div>
undefined
<div>click me</div>

Note that the second handler of the parent div is not triggered, this proofs that event.stopPropagation() is working.

As for why this is undefined is because you probably run the code in strict mode (or inside a module which by default is in strict mode) and react will run the handler for you, this is not a native DOM event buy synthetic.
So basically running a function like that:

myFunc()

Will set the this to window (or undefined in strict mode)

here is a chart i made, maybe it can help you

function App() {
  const myFunction = event => {
    event.stopPropagation(); // works as expected
    console.log(event.target); // Gets <div>click me</div>
    console.log(this); // 'this' is undefined
    console.log(event.currentTarget); // Gets <div>click me</div>
  };
  const myFunc2 = e => {
    console.log("myFunc2");
  };
  return (
    <div onClick={myFunc2}>
      <div onClick={myFunction}>click me</div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />