title: Javascript react component conditional menu item showing
body: <p>I have a react component and I've added 2 links.</p>
  
  <p>One link will show the login link and the other with show the logout.</p>
  
  <p>I just don't want both to show so on componentDidMount I've added a condition which will hide either one or the other.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>class Navigation extends Component {
  
    componentDidMount() {
  
      let logged = true;
  
      if (logged) {
        document.getElementById('login').style.display = 'none';
      } else {
        document.getElementById('logout').style.display = 'none';
      }
  
      }
    }
  
    render() {
  
      return (
        &lt;div&gt;
          &lt;ul&gt;
            &lt;li id="login"&gt;&lt;a href="#login"&gt;Login&lt;/a&gt;&lt;/li&gt;
            &lt;li id="logout"&gt;&lt;a href="#logout"&gt;Logout&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Navigation;
  </code></pre>
  
  <p>The issue is not nothing is being hidden either way so it's not working.</p>
  
  <p>How can I fix this so I can get the condition to hide either one or the other?</p>