# Conditional Rendering

class UserGreeting extends React.Component{
    render(){
        return <div>
          <h1>Welcome back!</h1>
          { this.props.isAdmin ? (<p>You are admin</p>) : (<p>You are editor</p>) }
        </div>;
    }
}

class GuestGreeting extends React.Component{
    render(){
        return <h1>Please sign up.</h1>;
    }
}

class Greeting extends React.Component{
  constructor(props) {
    super(props);
  }
  // this.props is an object {}
  // this.props.isLoggedIn is {isLoggedIn: true||false}
  
    render(){
      if (this.props.isLoggedIn) {
        return <UserGreeting isAdmin={true} />
      }
      
      return <GuestGreeting />;
    }
}

ReactDOM.render(<Greeting isLoggedIn={true} />, document.querySelector("#mountNode"))