title: Trying to emulate Bootstrap navbar collapse/expand with React State
body: <p>I am trying to use Bootstrap to expand and collapse the navbar when the hamburger icon is clicked.  The issue is I am using React and I'm pretty sure Bootstrap's DOM manipulation is conflicting with React's DOM manipulation.  So I'm trying to pull all the manipulation away from Bootstrap and rely purely on their styling and use React to update the classes instead.  That feels like the correct way to me.  Now I realize things like React Bootstrap exist but I already have vanilla Bootstrap integrated throughout my project and it appears like React Bootstrap is still on version 4, where I am using 5.</p>
  <p>So as far as I can tell, Bootstrap is manipulating the classes on this div: <code>&lt;div id=&quot;navbarSupportedContent&quot; style=&quot;&quot; class=&quot;navbar-collapse collapse&quot;&gt;</code>.  So it appears that they are adding the class <code>collapsing</code> and removing the class <code>collapse</code> as the menu is expanding or collapsing.  And then once it is fully shown, classes become <code>navbar-collapse collapse show</code> and for collapsed: <code>navbar-collapse collapse</code>.</p>
  <p>The transition time is set to .35 seconds by Bootstrap. So here is my React code:</p>
  <pre class="lang-js prettyprint-override"><code>const handleNavCollapse = () =&gt; {
          if (isNavCollapsed) {
              setNavbarClasses('navbar-collapse collapsing');
              //setTimeout(  &lt;-- I learned this way does not work correctly
              setTimeout(() =&gt; 
                  setNavbarClasses('navbar-collapse collapse show'),
                  350
              );
          } else {
              setNavbarClasses('navbar-collapse collapse');
          }
          setIsNavCollapsed(!isNavCollapsed);
      };
  </code></pre>
  <p>Also, if this helps someone figure out an answer, here is the CSS that Bootstrap is applying with the <code>collapsing</code> class:</p>
  <pre><code>.collapsing {
      height: 0;
      overflow: hidden;
      transition: height 0.35s ease;
  }
  </code></pre>
  <p>It works halfway in that it shows and hides the navbar menu correctly when clicking the hamburger icon.  But there is no transition.  I'm not seeing the <code>collapsing</code> class get added when I watch the DOM in the inspector like I do on the Bootstrap site.  I only see it add <code>show</code> and remove <code>show</code>.  Maybe I'm not doing the setTimeout right.</p>
  <p><strong>Update:</strong> So I figured out from this SO answer: <a href="https://stackoverflow.com/a/42650143/571723">https://stackoverflow.com/a/42650143/571723</a> that I was in fact doing the setTimeout wrong.  I switched to the arrow function.  And now I see the <code>collapsing</code> class getting added right away and then switching to <code>show</code> after the 350ms timeout.  Problem is there is still no transition animation, it merely shows the menu after 350ms.</p>
  <p><strong>Update 2:</strong> I'm getting further with my investigation into how Bootstrap is doing this.  I have managed to take a screenshot of the console while Bootstrap was animating the navbar on their site.
  <a href="https://i.stack.imgur.com/m8qie.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m8qie.png" alt="enter image description here" /></a>
  So you can see the height set to a specific number <s>and that changes very quickly</s> (actually that number does not change, it gets set to the 206px and stays there until it is fully opened).  And you can also see <code>height: 0</code> being overridden.  Those things are not happening in my site in the inspector.</p>