theJuls theJuls - 3 years ago 156
Javascript Question

How can I stop event bubbling for nested components dispatching a redux action?

I dynamically render a bunch of nested components, all of which are also attached to a redux action.

Unfortunately, the action is being called for all of them when I click the inner most element, what can I do to stop it from bubbling under these circumstances?

Example code:

<div onClick={()=>this.props.anAction(elementName)}>{elementName}
<div onClick={()=>this.props.anAction(innerElementName)}>{innerElementName}
<div onClick={()=>this.props.anAction(innerInnerElementName)}>

Answer Source

You can pass in onClick event and trigger stopPropagation()

<div onClick={(e)=>this.props.anAction(innerInnerElementName, e)}>    

anAction(el, ev) {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download