CODEWITHSUNDEEP
reactjsreact-routerreact-router-v4
ketysek
ketysek

Reputation: 1219

React-router clickable elements inside Link

I've got a following element inside <Link> component:

enter image description here

It needs to be whole clickable and it needs to preserve cmd/ctrl + click functionality (also right mouse button + open in new tab). The problem is that I need to enable clicking also on times icon without transition to a new location. Is it somehow possible?

Upvotes: 2

Views: 1075

Answers (1)

Ralph Najm
Ralph Najm

Reputation: 239

The problem is that the onClick event on the times icon is triggering the parent onClick which is the Link component which is the default behavior.

To prevent this you should add e.preventDefault() in your function:

onClick={(e) => e.preventDefault()}

Note: It might also be a good idea to use e.stopPropagation(); alongside e.preventDefault();

Upvotes: 2

Related Questions