how to change navbar menu icon when navbar collapse in react bootstrap

Question

I want to change hamburger icon and change hamburger icon to x icon when its clicked.

 <Navbar collapseOnSelect expand="lg" >
  <Navbar.Brand className="mx-5" href="#home">
  <StaticImage src="../images/logo.png"
                         quality={95}
                         formats={["AUTO", "WEBP", "AVIF"]}
                         />
  </Navbar.Brand>
  <Navbar.Toggle  aria-controls="responsive-navbar-nav" /> 
   <Navbar.Collapse id="responsive-navbar-nav" className="justify-content-around">

   <Nav className="mr-auto text-center nav-items">
  <Nav.Link className="pt-3 pt-md-1" href="#features">About</Nav.Link>
  <Nav.Link className="pt-3 pt-md-1"  href="#pricing">Skillset</Nav.Link>
  <Nav.Link className="pt-3 pt-md-1" href="#features">Our Brands</Nav.Link>
  <Nav.Link className="pt-3 pt-md-1" href="#pricing">Partners</Nav.Link>
  <Nav.Link className="pt-3 pt-md-1" href="#features">Careers</Nav.Link>
  <Nav.Link className="pt-3 pt-md-1" href="#pricing">Contact</Nav.Link>

  </Nav>

 </Navbar.Collapse>

Answer 1

you can use state for that const [change, set change] = use state(false)

now in useEffect check your Window's width, if its width is less than a certain number of pixels, u need to change the state value to true.

Now use ternary operator to change icon { change? icon_1: icon_2 }, Hope u got it!