Lifting state up

<!DOCTYPE html>
<html>

  <head>
    <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
    <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.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>

// Code goes here

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.login_action = this.login_action.bind(this);
    this.logout_action = this.logout_action.bind(this);
  
  }
  
  login_action(){
    this.props.onResultChange("login");
  }
  
  logout_action(){
    this.props.onResultChange("logout");
  }
  
  render(){
    return(
        <div>
            <h1>{this.props.status}</h1>
            <button onClick={this.login_action}>Login</button>
            <button onClick={this.logout_action}>Logout</button>
        </div>
    )
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.handleResultChange = this.handleResultChange.bind(this);
    this.state = {result: "login"};
  }

  handleResultChange(value) {
    this.setState({result: value});
  }
  
  render () {
    return (<Child status={this.state.result} onResultChange={this.handleResultChange}/>);
  }
}

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

/* Styles go here */