Why Is collapseOnSelect not working in this Navbar

user_13578243 0
Viewed 642

Trying to get a Navbar to collapseOnSelect when using react bootstrap... seems to not be working?

Here are my imports...

import React, {Component} from 'react';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import {Container} from 'react-bootstrap';
import './App.css'
import 'bootstrap/dist/css/bootstrap.min.css';

And Here's my Navbar...

 <Navbar collapseOnSelect fixed="top" bg="dark" expand="lg" variant="dark">
  <Navbar.Brand href="/"><img src={LifeBar} alt="logo" thumbnail style={{height: 100, marginLeft: 20}} className="logos"/></Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="ml-auto">
    <Link className="nav-link" to="/">Home</Link>
    <Link className="nav-link" to="/bio">Bio</Link>
    <Link className="nav-link" to="/appearances">Appearances</Link>
    <Link className="nav-link" to="/support">Support</Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>
react-bootstrap reactjs
1 Answers

You have to use either "this.state for class component" or "Hooks for functional component" In my case, I used React Hooks.

const [expanded, setExpanded] = useState(false);

<Navbar expanded={expanded} fixed="top" bg="dark" expand="lg" variant="dark">
  <Navbar.Brand href="/"><img src={LifeBar} alt="logo" thumbnail style={{height: 100, marginLeft: 20}} className="logos"/></Navbar.Brand>
  <Navbar.Toggle onClick={() => setExpanded(expanded ? false : "expanded")} aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="ml-auto">
      <Nav.Link onClick={() => setExpanded(false)}><Link className="nav-link" to="/">Home</Link></Nav.Link>
      <Nav.Link onClick={() => setExpanded(false)}><Link className="nav-link" to="/bio">Bio</Link></Nav.Link>
      <Nav.Link onClick={() => setExpanded(false)}><Link className="nav-link" to="/appearances">Appearances</Link></Nav.Link>
      <Nav.Link onClick={() => setExpanded(false)}><Link className="nav-link" to="/support">Support</Link></Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>
user_65672030
Related