React navbar handler with theme

Question

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 collapse.

so I made a handler with a ternary expression to render the class conditionally.

 <div 
 className={["navbar-collapse "  + this.state.navCollapsed ? 'collapse' : '' ]} 
  id="navbarColor01" >
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>

with respective state, and handler to handle the condition.

   state = {
    navCollapsed: false
  }

  onToggleNav = () => {
    console.log('its working')
    console.log(this.state.navCollapsed)
    this.setState({navCollapsed: !this.state.navCollapsed})
  }

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. ¨

<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.3/minty/bootstrap.min.css" rel="stylesheet" integrity="sha384-Qt9Hug5NfnQDGMoaQYXN1+PiQvda7poO7/5k4qAmMN6evu0oDFMJTyjqaoTGHdqf" crossorigin="anonymous">

here is the link of the theme I use.

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.

Answer 1

Change

   className={["navbar-collapse "  + this.state.navCollapsed ? 'collapse' : '' ]}

To

  className={this.state.navCollapsed ? "navbar-collapse collapse" : "navbar-collapse"}