How to open a page in new tab on click of a button in react? I want to send some data to that page also

Question

I'm working on a raise invoice page, in which user can raise a invoice on clicking of a button, I would call a api call and after getting the response I want to send some data to a page(RaisedInvoice.jsx) which should open in a new tab, how can i do it. The thing which I am not getting is how to open a page in new tab on click of a button in ReactJs.

RaiseInvoice.jsx:

import React from 'react';
import Links from './Links.jsx';
import history from './history.jsx';

import axios from 'axios';

class RaiseInvoice extends React.Component {
    
    constructor(props) {
        super(props);

        // This binding is necessary to make `this` work in the callback
        this.state = {projects: [], searchParam : ''};
        this.raiseInvoiceClicked = this.raiseInvoiceClicked.bind(this);
    }
    
    raiseInvoiceClicked(){
        // here i wish to write the code for opening the page in new tab.
    }
    
    render() {
      return (
         <div>
              <Links activeTabName="tab2"></Links>
              <div className="container">
                  <div className = "row col-md-4">
                      <h1>Raise Invoice...</h1>
                  </div>
                  <div className = "row col-md-4"></div>
                  <div className = "row col-md-4" style ={{"marginTop":"24px"}}>
                      <button type="button" className="btn btn-default pull-right" onClick={this.raiseInvoiceClicked}>Raise Invoice</button>
                  </div>
                  
              </div>
         </div>
      )
    }
}

export default RaiseInvoice;

I have to send an array of data to display them in a table, and some other details like address headings etc..... — Manikanta B, Nov 21 '17 at 06:21

score 62 · Accepted Answer · edited Oct 26 '19 at 20:23

62

Since you were going to send big data, appending them to your target URL looks shabby. I would suggest you use 'LocalStorage' for this purpose. So your code looks like this,

raiseInvoiceClicked(){
   // your axios call here
   localStorage.setItem("pageData", "Data Retrieved from axios request")
   // route to new page by changing window.location
   window.open(newPageUrl, "_blank") //to open new page
}

In your RaisedInvoice.jsx, retrieve the data from Local Storage like this,

componentWillMount() {
  localStorage.pagedata= "your Data";
  // set the data in state and use it through the component
  localStorage.removeItem("pagedata");
  // removing the data from localStorage.  Since if user clicks for another invoice it overrides this data
}

edited Oct 26 '19 at 20:23

Mukul Juneja

63
9

answered Nov 21 '17 at 06:28

Jayabalaji J

1,016
7
9

2

this will only work if the link is not to a different site – Joey Nov 21 '17 at 06:33
I'm getting this error: Unknown prop params on tag. Remove this prop from the element. @jayabalaji j – Manikanta B Nov 21 '17 at 06:56
can you explain me where and how to use this # ?? – Manikanta B Nov 21 '17 at 07:15
I have updated the code using local storage..pls check – Jayabalaji J Nov 21 '17 at 07:33

Joey · Answer 2 · 2019-07-15T06:26:03.290

29

You can just use plain JS to do it and append some query perimeters with it

raiseInvoiceClicked(){
    const url = 'somesite.com?data=yourDataToSend';
    window.open(url, '_blank');
}

edited Jul 15 '19 at 06:26

answered Nov 21 '17 at 06:21

Joey

1,075
8
13

i used to do like this: history.push({ pathname: '/editProject', state: { projectData : projectData} }) but is there any way to open in a new tab...? – Manikanta B Nov 21 '17 at 06:23
if its in the same domain use @Jayabalaji J answer, if its in another domain then you dont have many options to pass the data. url params are the only way – Joey Nov 21 '17 at 06:34
how to access the data from the url in the newly opened react component?? @joey – Manikanta B Nov 21 '17 at 06:43
heres a post that gives you a helper method to extract the params from the URL. https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript – Joey Nov 21 '17 at 06:45

score 8 · Answer 3 · edited May 10 '20 at 07:18

8

Instead of calling raiseInvoiceClicked() function inside onclick method, you can try

onClick="window.open('your_url')"

in your code.

edited May 10 '20 at 07:18

David Buck

3,752
35
31
35

answered May 10 '20 at 06:32

Ishani Maduwanthi

97
1
6

it will not work , i think it will give you the error of assigning string into the event – Tushar Jun 18 '21 at 07:10
If you want this approche you can't pass string, you need a function like this: `onClick={() => window.open("your_url")}` – Andy Feb 20 '22 at 22:46

score 2 · Answer 4 · answered Aug 17 '22 at 07:32

Simply do this!

const openLinkInNewTab = ( url ) => {
  const newTab = window.open(url, '_blank', 'noopener,noreferrer');
  if ( newTab ) newTab.opener = null;
}
//...

  return (
         //...
         <button onClick={ () => openLinkInNewTab('your.url')}> Click Here </button>
         //...
        )

score -1 · Answer 5 · edited Jan 15 '23 at 07:19

Pass this data with props:

let href = '...url_to_redirect...'; let data_to_send = [...];

let api_href = '...url_api_where_sent_data.../?data_to_send';
export const DictDefaultOptions = (url=(api_href), method='GET') => {
let defaultOptions = {
    url : url,
    method  : method,
    mode : 'cors',
    headers : {'Access-Control-Allow-Origin':'*'}
};

return defaultOptions };

let sentData = { 
    method: defaultOptions.method, 
    mode: defaultOptions.mode 
};

send_data_to_api = () => {
    let api_return = await fetch(api_href, sentData)
        .then(response => response.json())
        .then(responseText => { 
            data = (JSON.parse(JSON.stringify(responseText))) 
        })
        .catch(error => { 
            console.log(`${requestURL} error: `, error)
        });

    do { await this.wait(100) } while(Object.keys(api_return).length <= 0);

    if (Object.keys(api_return).length > 0) {
        return window.open(href, "_blank")
    } 
};

man, i think this s the best and complete way... editor makes the code not so good to understand, but i aways do like that ... a little gift this piece of code ... React APP JS — Renan Moura, Feb 16 '20 at 00:26

score -1 · Answer 6 · answered Feb 19 '21 at 10:21

You can open it in a new window using the following code.

Please note that for props you can pass any child components that should be rendered inside new window.

const RenderInWindow = (props) => {
  const [container, setContainer] = useState(null);
  const newWindow = useRef(null);
useEffect(() => {
    // Create container element on client-side
    setContainer(document.createElement("div"));
  }, []);

  useEffect(() => {
    // When container is ready
    if (container) {
      // Create window
      newWindow.current = window.open(
        "",
        "",
        "width=600,height=400,left=200,top=200"
      );
      // Append container
      newWindow.current.document.body.appendChild(container);

      // Save reference to window for cleanup
      const curWindow = newWindow.current;

      // Return cleanup function
      return () => curWindow.close();
    }
  }, [container]);

  return container && createPortal(props.children, container);
};

How to open a page in new tab on click of a button in react? I want to send some data to that page also

6 Answers6

You can open it in a new window using the following code.

Please note that for props you can pass any child components that should be rendered inside new window.