How To Call Different Function on React Nested Div onClick Event? [duplicate]

Question

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

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
– T.J. Crowder, Commented Apr 3, 2022 at 11:06

Mile Mijatović · Accepted Answer · 2022-04-03 10:32:06Z

-2

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

answered Apr 3, 2022 at 10:32

Mile Mijatović

3,2152 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sabiul Sabit Over a year ago

I try this one also but doesn't work for me

Mile Mijatović Over a year ago

It does work if you do it properly.

Collectives™ on Stack Overflow

How To Call Different Function on React Nested Div onClick Event? [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related