To toggle the navbar collapse without other library in React.
Applying Bootstrap 4 in a React project is kind of a thing that I am looking up to from the moment Bootstrap 4 got out. Bootstrap is not just a CSS library, as it also uses some JavaScript to add some interactive functionality. It is great for general projects. But applying it in React project is kind of different from many existing JavaScript project traditions. So I stumble into this issue where I could not make the navigation bar or navbar in short to toggle its collapse or uncollapse. To overcome this, I simply introduce a state variable to store either the navbar is in collapse or uncollapse. Here is my experiment with it in codepen, https://codepen.io/mjunaidi/pen/vewxBm.
Bootstrap uses css class show added to a div of class name collapse. While uncollapsed, the class name show is removed from it. So the state value that we introduce will simply be used to either append the class name show or to remove it.
The only issue by using this way, is I could not make use of the Bootstrap animation. By right, Bootstrap library appends a class collapsing to the div with class name collapse for a few seconds to animate it is collapsing. A very nice animation to have. But I am still working on applying this in React on how to apply the CSS animation in React in general. So by that time when I have figured it out, I will surely post it here.
Thanks for reading!