Imperative to declarative

<!DOCTYPE html>
<html>

  <head>
    <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.min.js"></script>
    <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="example"></div>
    <script src="script.js"></script>
  </body>

</html>


class BeforeUnload extends React.Component {

  constructor(props) {
    super(props);
    this.alertMessage = this.alertMessage.bind(this);
  }

  componentDidMount() {
    window.addEventListener("beforeunload", this.alertMessage);
  }
  
  componentDidUpdate(prevProps, prevState) {
    const { active } = this.props;
    const { active: wasActive } = prevProps;

    if (wasActive && !active) {
      window.removeEventListener("beforeunload", this.alertMessage);
    } else if (!wasActive && active) {
      window.addEventListener("beforeunload", this.alertMessage);
    }
  }
  
  componentWillUnmount() {
    window.removeEventListener("beforeunload", this.alertMessage);
  }

  alertMessage(e) {
    if (this.props.active) {
      e.returnValue = true;
      return true;
    }
  }
  

  render() {
    return React.Children.only(this.props.children);
  }
}

class App extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      active: true,
    }
    this.toggle = this.toggle.bind(this);
  }
  
  toggle() {
    this.setState((state) => { 
        return { active: !state.active } 
      }
    );
  }
  
  render() {
    return (
      <BeforeUnload active={this.state.active}>
        <button onClick={this.toggle}>{this.state.active ? "Active": "Inactive"}</button>
      </BeforeUnload>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('example')
);

/* Styles go here */