React prevent event bubbling in nested components on click

Question

Here\'s a basic component. Both the

and
• have onClick functions. I want only the onClick on the
• to fir

Answer 1

You can avoid event bubbling by checking target of event.
For example if you have input nested to the div element where you have handler for click event, and you don't want to handle it, when input is clicked, you can just pass event.target into your handler and check is handler should be executed based on properties of target.
For example you can check if (target.localName === "input") { return}.
So, it's a way to "avoid" handler execution