Bootstrap Navbar collapse toggle not working when directly copy and pasted from documentation-CodePudding

I am copy and pasting the bootstrap documentation navbar https://getbootstrap.com/docs/5.0/components/navbar/ directly into a react component:

export default function Navbar() {
    return (
        <nav >
            <div >
                <a  href="#">
                    Navbar
                </a>
                <button
                    
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span ></span>
                </button>
                <div  id="navbarSupportedContent">
                    <ul >
                        <li >
                            <a
                                
                                href="#"
                                data-bs-toggle="collapse"
                                data-bs-target=".navbar-collapse.show"
                            >
                                Home
                            </a>
                        </li>
                        <li >
                            <a
                                
                                href="#"
                                data-bs-toggle="collapse"
                                data-bs-target=".navbar-collapse.show"
                            >
                                Link
                            </a>
                        </li>
                        <li >
                            <a
                                
                                href="#"
                                data-bs-toggle="collapse"
                                data-bs-target=".navbar-collapse.show"
                            >
                                Disabled
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    );
}

The Navbar displays correctly when previewed and expands when clicked correctly, but when I click the toggle again it does not collapse. When inspecting the element and clicking I see this change:

<div  id="navbarSupportedContent">

but nothing changes on my page. I have bootstrap 5.2 installed locally and am able to use other bootstrap features on my page. Other collapses work fine as well. What am I missing?

CodePudding user response：

Bootstrap depends on its JS for some functionality. Have you imported the JS bundle (preferably in your global app file)? If not, please do. If you have, then consider using ReactStrap which is optimized for react.

https://reactstrap.github.io/

CodePudding user response：

Make sure that you already have imported all the dependencies. Some components require JavaScript plugins and Popper to work properly.

Also https://getbootstrap.com/docs/5.0/getting-started/introduction/#components for more specific components that require those plugins.