When i try to do react popout example its not working - reactjs

Question

I'm trying to do this example of react popout but it doesn't seem to be working.
https://github.com/JakeGinnivan/react-popout#readme
example is at the bottom.
import React from "react"
import Popout from "react-popout"
class PopupLogin extends React.Component {
constructor(props) {
super(props);
this.popout = this.popout.bind(this);
this.popoutClosed = this.popoutClosed.bind(this);
this.state = { isPoppedOut: false };
}
popout() {
this.setState({isPoppedOut: true});
}
popoutClosed() {
this.setState({isPoppedOut: false});
}
render() {
if (this.state.isPoppedOut) {
return (
<Popout title='Window title' onClosing={this.popoutClosed}>
<div>Popped out content!</div>
</Popout>
);
} else {
var popout = <span onClick={this.popout} className="buttonGlyphicon glyphicon glyphicon-export"></span>
return (
<div>
<strong>Section {popout}</strong>
<div>Inline content</div>
</div>
);
}
}
}
export default PopupLogin
This is supposed to look like http://jake.ginnivan.net/react-popout/ this.
But in my output looks like this.

Answer 1

You forgot to add a text to the span ,according to their docs, so as a result there was no link, hence no onClick was fired. You could style the link as per your needs
Sandbox: https://codesandbox.io/s/react-example-vxtu9
import React from "react";
import Popout from "react-popout";
import ReactDOM from "react-dom";
class PopupLogin extends React.Component {
constructor(props) {
super(props);
this.popout = this.popout.bind(this);
this.popoutClosed = this.popoutClosed.bind(this);
this.state = { isPoppedOut: false };
}
popout() {
this.setState({ isPoppedOut: true });
}
popoutClosed() {
this.setState({ isPoppedOut: false });
}
render() {
if (this.state.isPoppedOut) {
return (
<Popout
url="popout.html"
title="Window title"
onClosing={this.popoutClosed}
>
<div>Popped out content!</div>
</Popout>
);
} else {
var popout = (
<span
onClick={this.popout}
className="buttonGlyphicon glyphicon glyphicon-export"
>
Open
</span>
);
return (
<div>
<strong>Section {popout}</strong>
<div>Inline content</div>
</div>
);
}
}
}
ReactDOM.render(<PopupLogin />, document.getElementById("root"));

Answer 2

It looks like the code in documentation missing the text. Add (pop window out) in the popout.
import React from "react";
import Popout from "react-popout";
class PopupLogin extends React.Component {
constructor(props) {
super(props);
this.popout = this.popout.bind(this);
this.popoutClosed = this.popoutClosed.bind(this);
this.state = { isPoppedOut: false };
}
popout() {
this.setState({ isPoppedOut: true });
}
popoutClosed() {
this.setState({ isPoppedOut: false });
}
render() {
if (this.state.isPoppedOut) {
return (
<Popout title="Window title" onClosing={this.popoutClosed}>
<div>Popped out content!</div>
</Popout>
);
} else {
var popout = (
<span
onClick={this.popout}
className="buttonGlyphicon glyphicon glyphicon-export"
>
<a
style={{
textDecoration: "underline",
color: "blue",
cursor: "pointer"
}}
onClick={this.popout}
>
(pop window out)
</a>
</span>
);
return (
<div>
<strong>Section {popout}</strong>
<div>Inline content</div>
</div>
);
}
}
}
export default PopupLogin;