So you created a div with an onClick that redirects to a link or does any normal function. But that div also contains child elements that would do different functions or nothing at all, and are still doing the parent element's function. There is a very simple solution to fix this.
Suppose this react code:
import React from 'react'
const NormalReactElement = () => {
return (
<div onClick={() => console.log('Parent Element!')}>
<div id="child-element">
<p>I am a child element</p>
</div>
</div>
)
}
So how do you fix this? Here's how you can fix this:
const NormalReactElement = () => {
const handleChildElementClick = (e) => {
e.stopPropagation()
// Do other stuff here
}
return (
<div onClick={() => console.log('Parent Element!')}>
<div id="child-element" onClick={(e) => handleChildElementClick(e)}>
<p>I am a child element</p>
</div>
</div>
)
}
Hope you like the quick solution to this, I'll see you in the next article.
Top comments (7)
I do this so much that I wrote this wrapper:
Then just:
Would this work if you need to pass another prop to 'prevent' function and you caant pass e?
It works for any number of properties to the event handler yes. The spread params take care of that. Events always have e as the first parameter, you'd need a rewrite if this wasn't a standard event I guess.
I needed to pass a prop from a child element that wasnt (e), so I just remade the whole thing so the child wouldnt be dependednt on the parent element in the meantime
I gotta study this wrapper hmm
I see, I didn't think about it before. Thanks for sharing :)
This method will have you spending forever catching every single child click event.
Instead, use a ref, gate keep the clicking and discard clicks that aren't on the parent element:
stackoverflow.com/a/75562746/454615
in javascript*