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; 

Answer 1

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 }