-1

I have a nested div in react like this:

<div onClick={() => fn_01()}>
   <div onClick={() => fn_02()}>
   </div>
</div>

I want to call different function when user click those div. But when I click the 1st div it called fn_01() and when I click the 2nd div it also call fn_01(). How can I solve this issue.

I am using functional component in my react project. I also implement Class component and call those method using this., which doesn't work also. I need this work in Functional Component

Sabiul Sabit
  • 19
  • 1
  • 8
  • In a comment on an answer, you said you'd tried `stopPropagtion` but it didn't work. ItIt does work, if you do it properly. Part of the problem with your code is that you're creating a wrapper function: `onClick={() => fn_02()}`. Instead, just pass `fn_02` directly as the click handler: `onClick={fn_02}`. Then, declare the `event` parameter in `fn_02`: `function fn_02(event)` and in the body of the function call `event.stopPropagation()`. (If you wanted to keep the wrapper, you'd need to pass the `event`: `onClick={(event) => fn_02(event)}`.) – T.J. Crowder Apr 03 '22 at 11:06

1 Answers1

-2

The solution was to place a call to event.stopPropagation() in your child onClick method. This will prevent the parent from being called.

Mile Mijatović
  • 2,948
  • 2
  • 22
  • 41