title: How to hide some component based on some flag in react js
body: <p>I want to hide some component based on some flag in react js.
  I have an App component where I have Login and other components, I want to hide the other component until Login components <code>this.state.success</code> is <code>false</code> and on click of a button I am changing the sate, but it's not working, I am new to react, </p>
  
  <p>My App Class compoenent -</p>
  
  <pre><code>import React, { Component } from "react";
  import logo from "../../logo.svg";
  // import Game from "../Game/Game";
  import Table from "../Table/Table";
  import Form from "../Table/Form";
  import Clock from "../Clock/Clock";
  import "./App.css";
  import Login from "../Login/Login";
  
  class App extends Component {
    state = {
      success: false
    };
  
    removeCharacter = index =&gt; {
      const { characters } = this.state;
  
      this.setState({
        characters: characters.filter((character, i) =&gt; {
          return i !== index;
        })
      });
    };
  
    handleSubmit = character =&gt; {
      this.setState({ characters: [...this.state.characters, character] });
    };
  
    handleSuccess() {
      this.setState({ success: true });
    }
  
    render() {
      const { characters, success } = this.state;
  
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;span className="Span-inline"&gt;App&lt;/span&gt;
            &lt;Clock time={new Date()} /&gt;
          &lt;/header&gt;
          &lt;Login success={success} handleSuccess={this.handleSuccess} /&gt;
          {success &amp;&amp; (
            &lt;div className="container"&gt;
              &lt;h1&gt;React Tutorial&lt;/h1&gt;
              &lt;p&gt;Add a character with a name and a job to the table.&lt;/p&gt;
              &lt;Table
                characterData={characters}
                removeCharacter={this.removeCharacter}
              /&gt;
              &lt;h3&gt;Add New character&lt;/h3&gt;
              &lt;Form handleSubmit={this.handleSubmit} /&gt;
            &lt;/div&gt;
          )}
  
          {/* &lt;Game /&gt; */}
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>My Login component -</p>
  
  <pre><code>import React, { Component } from "react";
  import Greeting from "./Greeting";
  import LogoutButton from "./LogoutButton";
  import LoginButton from "./LoginButton";
  
  class Login extends Component {
    constructor(props) {
      super(props);
      this.handleLoginClick = this.handleLoginClick.bind(this);
      this.handleLogoutClick = this.handleLogoutClick.bind(this);
      this.state = {
        isLoggedIn: false,
        name: "",
        success: false
      };
    }
  
    handleLoginClick() {
      this.setState({ isLoggedIn: true });
      this.setState({ success: true });
    }
    handleLogoutClick() {
      this.setState({ isLoggedIn: false });
      this.setState({ success: false });
    }
    onChange = e =&gt; {
      this.setState({
        name: e.target.value
      });
    };
  
    render() {
      const isLoggedIn = this.state.isLoggedIn;
      const name = this.state.name;
      // const successLogin = this.state.success;
  
      let button;
  
      if (isLoggedIn) {
        button = &lt;LogoutButton onClick={this.handleLogoutClick} /&gt;;
      } else {
        button = &lt;LoginButton onClick={this.handleLoginClick} /&gt;;
      }
  
      return (
        &lt;div&gt;
          &lt;Greeting
            isLoggedIn={isLoggedIn}
            name={name}
            onChange={this.onChange}
          /&gt;
          {button}
        &lt;/div&gt;
      );
    }
  }
  
  export default Login;
  </code></pre>
  
  <p>please guide me on what I am doing wrong. 
  Why sometime debuggers do not trigger in react component?</p>