How to stop child elements from inheriting parent element's onClick in React

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.

Comments

[Zenobius Jiricek]

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

[Mike Talbot ⭐]

I do this so much that I wrote this wrapper:

export function prevent(fn, defaultOnly) {
    return (e, ...params) => {
        e && e.preventDefault()
        !defaultOnly && e && e.stopPropagation()
        fn(e, ...params)
    }
}

Then just:

import {prevent} from 'somewhere'

const NormalReactElement = () => {
   return (
      <div onClick={() => console.log('Parent Element!')}>
         <div id="child-element" onClick={prevent(()=>console.log("Child Element!"))>
            <p>I am a child element</p>
         </div>
      </div>
   )
}

[Adam]

Would this work if you need to pass another prop to 'prevent' function and you caant pass e?

[Mike Talbot ⭐]

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.

[Adam]

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

[Kunal Bagaria]

I see, I didn't think about it before. Thanks for sharing :)

[Owen Melbourne]

in javascript*