don't call function if a nested element was clicked

Question

I have a component with a nested component, like this:

<div id="bla" onClick={() => this.handleOnClick(this.props.someParameter, this.state.someState, {id})}>
    <div class="wrapper">
    <ChildComponent />
    </div>
    ....

The nested component is technically an icon and it has it's own handleOnClick function.

If I click the child component icon both handleOnClick functions are called. But I want to call only the child component's function. Is there a way to do this?

Answer 1

You should use event#stopPropagation.

On your child component's handleOnClick function, just call it like:

handleOnClick = function(e) {
    e.stopPropagation();
    ...rest of your code
} 

I haven't worked with react, but this should work.

Answer 2

Using event.stopPropagation(); in your child component's onClick function will solve your problem.

This method will prevent the event from propagating to your parent component

childOnClick = event => {
    event.stopPropagation();
    //.... your code
}