I use this plugin . There is a page on which after clicking on the button will pop up will appear. I screwed it and screwed it on, or at least poorly, you can open it, but there is a problem. Here is how I used it. Created a component:

var PopoutWindow = React.createClass({ render: function () { var url = (this.props.url != null) ? this.props.url : ""; var title = (this.props.title != null) ? this.props.title : ""; if (this.props.isPoppedOut){ return ( <Popout url={url} title={title} > </Popout> ); } else { return ( null ); } } });

Here is how I wrote it in the render of the parent component:

 <PopoutWindow url='' title='POPUP' isPoppedOut={this.state.isPoppedOut} />

Immediately below the button:

 <button type="submit" href="javascript:void(0);" onClick={this.popupOpen} className="btn"> Install </button>

The popupOpen method, which is also indicated in the parent:

 popupOpen: function () { if(this.state.isPoppedOut) { this.setState({isPoppedOut: false}); } else { this.setState({isPoppedOut: true}); } },

By clicking on the button, the handler is triggered and a new window appears in the browser, but he writes an error to the console:

 Uncaught Error: ReactDOM.render(): Invalid component element.

Googled and saw errors in people on the network. They are associated with incorrect forwarding in ReactDOM.render() , did not quite understand it. In my container, the entire application renders its components in a certain container. Does this thing need a separate render container? And another small question regarding closure. I suspect that it is somehow implemented differently than mine. If you open the window with the button, but close it by clicking the x button on the panel, then isPopedOut will not turn false and then you have to double-click my button to open it. I did not quite understand how to do this normally

  • one
    PopoutWindow add onClosing = {this.popupOpen} and solve the issue with closing. As I understand it, the render error is due to the fact that there is nothing in PopoutWindow. Maybe try to stick in an empty <div> </ div>? - qpeela
  • Yes, you are right. Added an empty div to the component and the error disappeared. Thank you. If you do not mind, duplicate in response. I will select it and close the question) - Iga

1 answer 1

 <PopoutWindow url='' title='POPUP' isPoppedOut={this.state.isPoppedOut} />

Here add onClosing={this.popupOpen} (event handler for closing the window) and add an empty <div> inside this component.