react_login_logout_basic.jsx

import React, { Component } from "react";

export default class Foo extends Component {
  state = {
    status: ""
  };

  componentDidMount() {
    this.setState({ status: localStorage.getItem("status") });
  }

  login = () => {
    localStorage.setItem("status", "logged");
    this.setState({ status: localStorage.getItem("status") });
  };

  logout = () => {
    localStorage.removeItem("status");
    this.setState({ status: localStorage.getItem("status") });
  };

  render() {
    if (this.state.status == "logged") {
      return (
        <div>
          Welcome deny
          <button onClick={this.logout}>Logout</button>
        </div>
      );
    }

    return (
      <div>
        Please log in
        <button onClick={this.login}>Login</button>
      </div>
    );
  }
}