title: Bootstrap + React: navbar toggler not working
body: <p>So, I have this stateless component, and I've been trying to integrate Bootstrap into my code. I did this in vanilla HTML/CSS and JS and it works fine. However, for some reason, the data-target="#navigation-bar" of my button when the screen is smaller than a certain width does not take the info from the class with the same id. Here is the component's code below. Any help would be appreciated.</p>
  
  <pre><code>const Navigation = (props) =&gt; {
  const navNames = props.tabs.map(tab =&gt; {
      return &lt;li className="nav-item" key={`${tab}`}&gt;&lt;a className="nav-link" href={`${tab}`}&gt;{tab}&lt;/a&gt;&lt;/li&gt;
  })
  return (
    &lt;nav className="navbar navbar-expand-lg fixed-top"&gt;
      &lt;button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-bar"&gt;
        &lt;span className="navbar-toggler-icon"&gt;&amp;#9776;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div className="collapse navbar-collapse" id="navigation-bar"&gt;
      &lt;ul className="navbar-nav ml-auto"&gt;
        {navNames}
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;/nav&gt;
  )
  </code></pre>
  
  <p>}</p>
  
  <p>ultimately, I'm trying to make the navigation tabs (that come in as props) collapse into a single drop down button when it's a small screen to avoid pollution. :) </p>