Separate onClick event for parent and child element

Question

I have JSX code like this:

<div id="parent" onClick={clickOnParent} style={{ width: 100, height: 100 }}>
  <div id="child" onClick={clickOnChild} style={{ width: 20, height: 20 }} />
</div>

When I click on parent (outside the child) it will run clickOnParent, and when I click the child it will run both clickOnParent and clickOnChild of course.
Now I want to trigger only clickOnChild and ignore clickOnParent when clicking exactly on the child. How can I do?

Answer 1

Use Event.stopPropagation()

const clickOnChild = (event) => {
  event.stopPropagation();
  ...
}