ReactJS: Render có điều kiện - Conditional Rendering React

Start project

Conditional rendering react

ReatcJS 2018

class LoginComponent extends React.Component {

  constructor(props){
      super(props);
      this.state = {isLoggedIn: false};
  }
  handleLogout = () => {
    this.setState({isLoggedIn: false})
  }
  handleLogin = () => {
    this.setState({isLoggedIn: true})
  }
  render() {
    let myButton = null;
    if(this.state.isLoggedIn){
      myButton = <button onClick={this.handleLogout}>Logout</button>
    } else {
      myButton = <button onClick={this.handleLogin}>Login</button>
    }
    return (
      <div> {myButton} </div>
    );
  }
}

ReactDOM.render(
  <LoginComponent />
  ,document.getElementById('root'));