Ignoring parent or child's event handler

Question

I have part of a React Component that looks like this:

<div onClick={() => handleTriggerParent()}>
    <button type='button' onClick={() => handleTriggerChildren()}>
         Children
    </button>
</div>

I want to ignore handleTriggerParent() method when handleTriggerChildren() method is triggered.

What's the best way to achieve this?

Answer 1

Look into: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

Define the button's click handler like so:

onClick={(e) => {
  e.stopPropagation();
  handleTriggerChildren();
}}