how to close the menu when clicked

import React from 'react'
import {Link} from "react-router-dom"

const Navbar = () => {

    return (
      <div className="navbar-dark bg-dark shadow sticky-top">
        <div className="container">
          <nav className="navbar navbar-expand-lg">
            <div className="container-fluid">
              <Link to="/" className="navbar-brand"><span className="effect">I <span className="rotation">Design</span> <span className="flash">Views</span></span>
              </Link>
              <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
              </button>
              <div className="collapse navbar-collapse" id="navbarSupportedContent">
                <ul className="navbar-nav m-auto p-3 mb-2 mb-lg-0">
                  <li className="nav-item">
                    <Link to="/" className="nav-link active">Inicio</Link>
                  </li>
                  <li className="nav-item">
                    <Link to="/about" className="nav-link active">Bio</Link>
                  </li>
                  <li className="nav-item">
                    <Link to="/servicios" className="nav-link active">Servicios</Link>
                  </li>
                  <li className="nav-item">
                    <Link to="/contacto" className="nav-link active">Contacto</Link>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </div>
      </div>
    )
}

export default Navbar

The previous versions of the bootstrap menu came by default to close the menu when clicking, now that I update I don't really know how to do it with react js, if anyone can help me I would appreciate it

1 answer

  • answered 2021-04-08 03:43 Nithish

    You might have missed out adding the bootstrap's js resource. Try adding the below in your index.html.

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    

    I have used your code as it is, by just adding the bootstrap js resource it's working as expected. Below is the example,

    const Navbar = () => {
        return (
          <div className="navbar-dark bg-dark shadow sticky-top">
            <div className="container">
              <nav className="navbar navbar-expand-lg">
                <div className="container-fluid">
                  <a href="/" className="navbar-brand"><span className="effect">I <span className="rotation">Design</span> <span className="flash">Views</span></span>
                  </a>
                  <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                  </button>
                  <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav m-auto p-3 mb-2 mb-lg-0">
                      <li className="nav-item">
                        <a href="/" className="nav-link active">Inicio</a>
                      </li>
                      <li className="nav-item">
                        <a href="/about" className="nav-link active">Bio</a>
                      </li>
                      <li className="nav-item">
                        <a href="/servicios" className="nav-link active">Servicios</a>
                      </li>
                      <li className="nav-item">
                        <a href="/contacto" className="nav-link active">Contacto</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </nav>
            </div>
          </div>
        )
    }
    
    ReactDOM.render(<Navbar />, document.getElementById("react"));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    
    <div id="react"></div>

    Note: Just for the demo purpose I have replaced Links with anchors.