Open a Component in New Window on a Click in React

Pop out a react component into a new window

You can use React Portal to open a new window and maintain it under React tree.

It's a semi-long post so check out this post.

Using a React 16 Portal to do something cool

You can open a new window, do what you need to do, and forward the user to a different URL, which won't affect your original window.

How can I handle an event to open a window in react js?

You are on the right way!

Is it something you need? I prepared the example:
click here

var Example = React.createClass({
fbShare: function() {'[title]=Fb Share&p[summary]=Facebook share popup&p[url]=javascript:fbShare("")&p[images][0]=""', 'sharer', 'toolbar=0,status=0,width=548,height=325');

render: function() {
return (<div>
<img src="" onClick={this.fbShare} />

<Example />,

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

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,

// your axios call here
localStorage.setItem("pageData", "Data Retrieved from axios request")
// route to new page by changing window.location, "_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
// removing the data from localStorage. Since if user clicks for another invoice it overrides this data

Related Topics

Leave a reply