0

I'm gonna dispatch an action by clicking.

export default function Example() {

  const dispatch = useDispatch()
  
  function dispatching() {
    dispatch(action)
  }

  return (
    <Parent onClick={dispatching}>
      <Child />
    </Parent>
  )

}

I want nothing happens when I click the child one. But it's hard to solve it because of the bubbling, I guess. I don't think it is related to e.stopPropagation(), because that is useful when I want to click the child one, not the parent one. This is the opposite situation. I already have tried it for if I'm confused, and it didn't work as expected. Please help me, thank you.

user15397083
  • 51
  • 1
  • 5
  • You want to capture the event - which means it goes parent -> child rather than bubble the event, which means it goes from child -> parent (default behaviour). When you capture the event, do the same stopPropagation and it won't make it to the child. – Adam Jenkins Apr 18 '21 at 21:46

1 Answers1

-1

Remove the spacing you have in your onClick.


export default function Example() {

  const dispatch = useDispatch()
  
  function dispatching() {
    dispatch(action)
  }

  return (
    <Parent onClick={dispatching}>
      <Child />
    </Parent>
  )

}
inux
  • 99
  • 7