Maintaining href open in new tab with an onClick handler in React

Question

I have an onClick  React  handler on a table cell that fires properly  however I want to maintain the  Open in a new Tab  feature that having an href on a tag gives you   Trying to combine both on a single element doesn t work as expected  of course    lt td onClick  this someFunction  href  someLink  gt       some content  lt td gt    Previously I looked into having an anchor tag nested inside the table cell span the full height  so whenever the contents of the cell were right-clicked  I could  Open in a New Tab  and still keep an onClick handler on the table cell element  However there s various problems with that approach  outlined here   TLDR  Overriding causes other problems  Solutions have various compatibility issues   So I ditched that approach for the one explained above  Ideas suggestions  Is there a way to have the option  Open in a New Tab  without having to use an anchor href

User · Answer

Most Secure Solution  JS only As mentioned by alko989  there is a major security flaw with  blank  details here   To avoid it from pure JS code  const openInNewTab    url    gt      const newWindow   window open url    blank    noopener noreferrer     if  newWindow  newWindow opener   null    Then add to your onClick onClick       gt  openInNewTab  https   stackoverflow com     The third param can also take these optional values  based on your needs

User · Answer

Above answers are correct  But simply this worked for me target   quot  blank quot

User · Answer

You have two options here  you can make it open in a new window tab with JS    lt td onClick      gt  window open  someLink     blank    gt text lt  td gt    But a better option is to use a regular link but style it as a table cell    lt a style   display   table-cell    href  someLink  target   blank  gt text lt  a gt

User · Answer

The answer from  gunn is correct  target  quot  blank makes the link open in a new tab  But this can be a security risk for you page  you can read about it here  There is a simple solution for that  adding rel  quot noopener noreferrer quot    lt a style   display   quot table-cell quot    href    quot someLink quot  target    quot  blank quot   rel    quot noopener noreferrer quot  gt text lt  a gt

User · Answer

React   TypeScript inline util method   const navigateToExternalUrl    url  string  shouldOpenNewTab  boolean   true    gt  shouldOpenNewTab   window open url    blank     window location href   url

[javascript] Maintaining href "open in new tab" with an onClick handler in React

Most Secure Solution, JS only

Examples related to javascript

Examples related to reactjs