Creating a button in react that, when clicked, opens a webpage

Question

Clicking the button does nothing.

I've tried passing in the <a href={news.url}> into the function I use to generate the button. Currently the code shows the link on the button but I'm stumped at how to open a new tab with the provided Url. I've heard a lot of people talking about Router, but it seems to me why do I have to use this for such a simple thing. As usual I overthink these things. The data is brought in from an object on another file.

import React from 'react';
import PropTypes from 'prop-types';
import './index.css';
import FileName from './filename';
import Subtitle from './subtitle';

const ListItem  = ({news}) => ( 

    <tr className="list-item">
        <td><FileName news={news} /> <a href={news.url}>{news.url}</a></td>
        <HandleClick openUrl={news.url} passLink={<a href={news.url}>{news.url}</a>}/>
        <span className="website"></span>
        <td><Subtitle news={news}/> </td>
    </tr>
)

 function HandleClick (props)  {
    return(
    <button onClick={props.passLink}>{props.openUrl} </button>
    )
}

export default ListItem

I expect the button to open a new tab in the browser which uses the link I've provided with the props. The button does nothing.

score 3 · Accepted Answer · answered May 17 '19 at 14:05

For buttons, you need to open a window explicitly using window.open.

Refer to - Open button in new window?

So you can take two approaches instead of embedding <a href={news.url}>{news.url}</a> which would simply render the anchor but not open a new window.

1 Open the Window using `window.open`.

function HandleClick (props)  {
  return (<button onClick={() => window.open(props.openUrl)}>{props.openUrl} </button>)
}

2 Or use an anchor but style it as a button.

Bootstrap and other CSS frameworks lets you style an anchor as a button (btn btn-primary, etc).

function HandleClick (props)  {
  return (<a href={props.openUrl} target="_blank" rel="noopener noreferrer">{props.openUrl}</a>)
}

IMPORTANT - You should add rel="noopener noreferrer" for security reasons when your target is set to _blank. - refer to https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

score 1 · Answer 2 · answered May 17 '19 at 14:07

1

To open a new window or tab you can use the window.open(...) function within the onClick handler of your button.

const ListItem = ({ news }) => (

  <tr className="list-item">
    <td><FileName news={news} /> <a href={news.url}>{news.url}</a></td>
    <button onClick={() => {
      window.open(
        news.url,
        '_blank' // <- opens the link in a new tab or window.
      );
    }} >{news.url}</button>
    <span className="website"></span>
    <td><Subtitle news={news} /> </td>
  </tr>
)

answered May 17 '19 at 14:07

Matthias Fischer

936
8
7

Is there a way to remove the http://localhost:3000/ so the link will actually load? At the moment the solution above does actually do what I asked from you but it keeps the localhost before the link. – NightTom May 21 '19 at 09:54
What do you intent, remove the localhost:3000 from the addessbar or remove it from the uri you navigate to? Please explain a bit more in detail. – Matthias Fischer May 21 '19 at 18:48

Creating a button in react that, when clicked, opens a webpage

2 Answers2

1 Open the Window using window.open.

2 Or use an anchor but style it as a button.

1 Open the Window using `window.open`.