basics - conditional rendering with inline conditional or ternery operator ?: example

App.js

import React, { Component } from "react";

export class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedin: true
    };
    this.loginHandler = this.loginHandler.bind(this);
    this.logoutHandler = this.logoutHandler.bind(this);
  }

  loginHandler() {
    this.setState({
      isLoggedin: true
    });
  }
  logoutHandler() {
    this.setState({
      isLoggedin: false
    });
  }

  render() {
    const { isLoggedin } = this.state;
    return (
      <div>
        <h2>the user is {isLoggedin ? "currently" : "not"} logged in</h2>
        {isLoggedin ? (
          <LogoutButon onClick={this.logoutHandler} />
        ) : (
          <LoginButton onClick={this.loginHandler} />
        )}
      </div>
    );
  }
}

function LoginButton(props) {
  return <button onClick={props.onClick}>login</button>;
}

function LogoutButon(props) {
  return <button onClick={props.onClick}>logout</button>;
}

export default App;