title: React navbar handler with theme
body: <p>I have imported a bootstrap theme for my React application, and I have a conditional class on rather the nav bar should collapse or not <code>collapse</code>.</p>
  
  <p>so I made a handler with a ternary expression to render the class conditionally. </p>
  
  <pre><code> &lt;div 
   className={["navbar-collapse "  + this.state.navCollapsed ? 'collapse' : '' ]} 
    id="navbarColor01" &gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
  </code></pre>
  
  <p>with respective state, and handler to handle the condition. </p>
  
  <pre><code>   state = {
      navCollapsed: false
    }
  
    onToggleNav = () =&gt; {
      console.log('its working')
      console.log(this.state.navCollapsed)
      this.setState({navCollapsed: !this.state.navCollapsed})
    }
  </code></pre>
  
  <p>My issue is that, whenever I use a ternary expression to render the names, it does not show any other items, in the navbar, and the toggle does not work. ¨</p>
  
  <pre><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.3/minty/bootstrap.min.css" rel="stylesheet" integrity="sha384-Qt9Hug5NfnQDGMoaQYXN1+PiQvda7poO7/5k4qAmMN6evu0oDFMJTyjqaoTGHdqf" crossorigin="anonymous"&gt;
  </code></pre>
  
  <p>here is the link of the theme I use. </p>
  
  <p>I have tried with just rendering the condition manually, with the two last names inside a javascript array, which worked fine, so I suspect the ternary condition. </p>