0

I am creating a project in React and I am trying to open a canvasjs graph in another window on a button click. Below is the code to the loadData.js file that when the program is ran I will click on the button to open a separate window containing the graph. The issue that I am running into is that the graph is contained in another file called multiSeriesChart.js and I am not quite sure how to call it inside of the button. Is there something in React that I can use to do this? the window.open() function does not seem to be working. Thank you!

    openNewWindow = () => {
       const newWindow = window.open(); 
       newWindow.document.write(<MultiSeriesChart dataFromParent = {this.state} parentCallback/>);
    }


    render() {
        return (
            <div>
                <title>Program Controller</title>
                <h1>Program Controls: </h1>
                <button onClick={this.pressedLoad}>Load Data</button>
                <button id="multiSeriesChart" onClick={this.openNewWindow}>Open Multi-Series Graph</button>
            </div>
        );
    };
};
Sarun UK
  • 6,210
  • 7
  • 23
  • 48
TheCodeLab
  • 39
  • 2
  • 8
  • You cannot pass JSX to `window.open()`; you have to regard the contents of the new window as separate HTML document. It can of course display its own React app, but therefore passing data over there will only work via established methods like localStorage. If you use `react-router`, you can use a url like `/graph` to display the content of that route in the new window. –  Oct 05 '20 at 23:57
  • @ChrisG Okay thank you! with react-router can I just wrap my current div in that and specify the route or is it a little more complex than that? – TheCodeLab Oct 06 '20 at 00:04
  • Wrapping the main app and the graph part in a each and everything in a should more or less do the trick, yes. –  Oct 06 '20 at 00:05
  • You can also use [React Portals](https://reactjs.org/docs/portals.html), please take a look at [this post](https://stackoverflow.com/questions/47574490/open-a-component-in-new-window-on-a-click-in-react) – SomoKRoceS Oct 06 '20 at 00:18
  • @SomoKRoceS this in fact did create a new window but it did not render my canvasjs graph. It just in fact re-opened the base url to my main web page again. How can I get it to render the graph in the new webpage? – TheCodeLab Oct 06 '20 at 02:03
  • `you can use this npm module` - https://www.npmjs.com/package/react-new-window – Sarun UK Oct 06 '20 at 08:06
  • Does this answer your question? [Pop out a react component into a new window](https://stackoverflow.com/questions/52597250/pop-out-a-react-component-into-a-new-window) – Sarun UK Oct 06 '20 at 08:07

1 Answers1

0

You can use the React portal for this ReactDOM.createPortal.
You can check my answer to this question. although the question is about electron apps, the same ideas apply also to normal webpages.

akram-adel
  • 920
  • 7
  • 8
  • this in fact did create a new window but it did not render my canvasjs graph. It just in fact re-opened the base url to my main web page again. How can I get it to render the graph in the new webpage? – TheCodeLab Oct 06 '20 at 02:04
  • the new window will render a new component. did you try to pass the graph data as a param to the component and have it render those data? – akram-adel Oct 06 '20 at 03:45