Bootstrap Dropdowns Are Built On Popper.js
tl;dr if you are having problems with dropdowns in React Bootstrap, try installing popper
(Based on this StackOverflow post)
The original title was “Unfinished Projects — WayFinderReact,” but I thought this was an interesting enough problem for its own short blog post.
Background
I have used Vue.js in the past. I have not really used React. On one occasion, a company gave me a challenge for an interview:
They asked me to use something called SWAPI, which I will not link because the project seems to have been discontinued. In fact, to even access it I had to learn about Google Chrome’s “thisisunsafe” workaround, which was funny to me (like a kind of poorly-kept cheat code), but the page is down. SWAPI was a Star Wars API, and all it did was return data based on queries. So the frontend application would give the user the ability to search for characters based on criteria such as “home planet.”
I documented their feedback here. Long story short, I used Vue and Vuetify to access the API, and to give me some Material components like a dropdown. The feedback was that the components extended to the end of the page (ie not utilizing CSS), and that some queries failed (ie not using the API correctly). The reason was that the API only returns a limited number of results per query, which is something I was supposed to work through.
This new idea, WayFinderReact, was meant to just be a quick way to get exposed to React. Considering that SWAPI no longer exists, maybe I will shift to something else.
The Dropdown
I tried grabbing the dropdown from here. I wanted to mirror my experience using Vue/Vuetify, and I did so using Yarn as a package manager and Vite for scaffolding. Smack recommended Bootstrap when I realized there was no out-of-the-box dropdown.
I kept getting something like this.
This is a non-functioning dropdown. I kept looking here, at a sandbox by a user called TheCodingCat, wondering what they did that I was missing. CSS styling? Dropdown worked without it. Their work seemed to closely mirror that of the official React Bootstrap site.
Then I found this Stackoverflow post, and the answer was simple. I just needed to separately install Popper.
Now the dropdown looks like the one at the top of this post.
Closing Thoughts
That was short-lived. I am probably going to go back to what I was working on before.
