Navbar toggle button isn't working in react Using Bootstrap 4.5.3

Question

Why my toggle button is not working. I'm creating a react app ? Please help Should I try with ul li tags or is there any library that makes responsive navbar for react?

import React from "react";
import { Link, NavLink } from "react-router-dom";

const NavBar = ({ user }) => {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <Link className="navbar-brand" to="/">
        MoviesLix
      </Link>
      <button
        className="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNavAltMarkup"
        aria-controls="navbarNavAltMarkup"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span className="navbar-toggler-icon"></span>
      </button>
      <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div className="navbar-nav">
          <NavLink className="nav-link" to="/movies">
            Movies<span className="sr-only">(current)</span>
          </NavLink>
          <NavLink className="nav-link" to="/customers">
            Customers
          </NavLink>
          <NavLink className="nav-link" to="/rentals">
            Rentals
          </NavLink>
          {!user && (
            <React.Fragment>
              <NavLink className="nav-link" to="/login">
                Login
              </NavLink>
              <NavLink className="nav-link" to="/register">
                Register
              </NavLink>
            </React.Fragment>
          )}
          {user && (
            <React.Fragment>
              <NavLink className="nav-link" to="/profile">
                {user.name}
              </NavLink>
              <NavLink className="nav-link" to="/logout">
                Logout
              </NavLink>
            </React.Fragment>
          )}
        </div>
      </div>
    </nav>
  );
};

export default NavBar;

When clicking button navbar isn't opening in mobile rest everything working good i dont know why this happening

Answer 1

React basically works with components and it's lifecycles. To use Bootstrap with it you should install Bootstrap and React Bootstrap modules using npm or yarn like so:

Using Yarn: yarn add react-bootstrap bootstrap

Using NPM: npm install react-bootstrap bootstrap

After that you can access the React Bootstrap documentations to learn how to use it's components. You can access itclicking here .

The main problem with your code is that you are trying to use toggle through bootstrap's vanilla methods. It was made to work with vanilla JavaScript and React will not understand it as JQuery would.

You'll have to create a React component's state and a controller function, then validate the state to render the you nav or hide it. You can check out this example that I wrote to you:

  const [toggle, setIsToggled] = useState(() => false); // this is a react hook to handle component states
  
  function handleToggleNavbar() { // this function is the controller of your toggle button
    setIsToggled(currentStateValue => { // useState returns a callback with the current state value
      return !currentStateValue; //inverting the toggle state value
    });
  }