how to close the menu when clicked - reactjs

Question

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

Answer 1

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">
Inicio
</li>
<li className="nav-item">
Bio
</li>
<li className="nav-item">
Servicios
</li>
<li className="nav-item">
Contacto
</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.