React-router clickable elements inside Link

Question

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

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?

Answer 1

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();