Auto-closing the hamburger menu in React-Bootstrap Clark Wilkins 2022.03.15
I just finished considerable research to find a working way to have the mobile version of the React Bootstrap NavBar collapse back down after you make a menu selection, and found the answer here. To summarize, we are using a NavBar collape condition stored in state and toggling it true to make the expanded menu go away.
All edits are done in App.js. Here are some "takeaway" points
const [expanded, setExpanded] = useState( false );as the menu condition, kept in State.
expanded={expanded}Note it references the above State value.
onClick={ () => setExpanded( expanded ? false : "expanded" ) }to toggle the State value.
onClick={() => setExpanded(false)}By tying it to the specific item, you can use drop-down menus (click) and not toggle the entire Navbar before you get to the menu item you want.
It's a simple and elegant solution, but hard to find in the noisy Stack Overflow environment, so I reposted it here.