How to fix an issue with non-opening navbar?

Question

I am developing a page, using react+bootstrap. For a great pitty, my navbar isn't opening, when I press the button

I have alredy tried changing classNames, but nothing

I also tried to link JQ and Bootstrap.js noothing helped. Please, help me

const Header = () => {
  return (
    <nav className="navbar sticky-top navbar-expand-lg navbar-light">
      <a href="https://speedboostr.com/">
        <img src={Logo} />
      </a>
      <button
        className="navbar-toggler collapsed"
        type="button"
        data-toggle="collapse"
        data-target="#navbarCollapse"
        aria-controls="navbarCollapse"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        {" "}
        <span className="navbar-toggler-icon" />{" "}
      </button>
      <div
        className="collapse navbar-collapse justify-content-end"
        id="navbarCollapse"
      >
        <ul className="navbar-nav">
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com">
              HOME
            </a>
          </li>
          <li className="nav-item">
            <a
              className="nav-link active"
              href="https://analyze.speedboostr.com"
            >
              SHOPIFY ANALYZER
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com/services">
              SERVICES
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com/about">
              ABOUT
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com/contact">
              CONTACT
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com/blog">
              LEVEL UP (BLOG)
            </a>
          </li>
        </ul>
      </div>
    </nav>
  );
};

I expect navbar to dropdown

Answer 1

My Assumptions is you have not included bootstrap.js and jquery in index.html or as a npm package.

Below is working code and working codesandbox link

Header.js

import React from "react";

const Header = () => {
  return (
    <nav className="navbar sticky-top navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="#">
        Navbar
      </a>
      <button
        className="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarCollapse"
        aria-controls="navbarCollapse"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        {""}
        <span className="navbar-toggler-icon" />{" "}
      </button>

      {/* Navbar links */}
      <div
        className="collapse navbar-collapse justify-content-end"
        id="navbarCollapse"
      >
        <ul className="navbar-nav">
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com">
              HOME
            </a>
          </li>
          <li className="nav-item">
            <a
              className="nav-link active"
              href="https://analyze.speedboostr.com"
            >
              SHOPIFY ANALYZER
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com/services">
              SERVICES
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com/about">
              ABOUT
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com/contact">
              CONTACT
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com/blog">
              LEVEL UP (BLOG)
            </a>
          </li>
        </ul>
      </div>
    </nav>
  );
};
export default Header;

Include these scripts in index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>