Bootstrap navbar in react app not working on mobile view

Question

i'm facing issue in bootstrap navbar on react app. The app is working fine on desktop browsers but the same is not working on mobile phone browsers. Please, check my application on github pages on desktop browser and in mobile browser. You can understand the problem. Github-pages link : https://iamsanga.github.io/test-app/

Below is App.js code :

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import Create from "./components/Create";
import Edit from "./components/Edit";
import Index from "./components/Display";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { data: [], results: [], query: "" };
  }

  onSearch = event => {
    this.setState({ query: event });

    let updateList = this.state.data;
    updateList = updateList.filter(item => {
      return (
        item.name.toLowerCase().search(this.state.query.toLowerCase()) !== -1
      );
    });

    this.setState({
      results: updateList
    });
  };

  receiveData = data => {
    this.setState({
      data: [...this.state.data, data]
    });
    // console.log(this.state.data);
  };
  onDelete = name => {
    // console.log(name);
    const filteredData = this.state.data.filter(data => {
      return data.name !== name;
    });
    this.setState({ data: filteredData });
  };

  onEdit = (newData, orgName) => {
    let updateData = this.state.data;
    updateData = updateData.map(data => {
      if (data.name === orgName) {
        data.name = newData.name;
        data.shop = newData.shop;
        data.status = newData.status;
      }

      return updateData;
    });

    this.setState({ updateData });
  };

  render() {
    const { data, results, query } = this.state;
    // console.log("res",this.state.results)
    var datas = results !== "" && !query ? data : results;

    return (
      <Router>
        <div className="container">
          <nav className="navbar navbar-expand-lg navbar-blue bg-light">
            <div
              className="collapse navbar-collapse"
              id="navbarSupportedContent"
            >
              <ul className="navbar-nav mr-auto">
                <li className="nav-item">
                  <Link to={"/create"} className="nav-link">
                    Home
                  </Link>
                </li>
                <li className="nav-item">
                  <Link to={"/index"} className="nav-link">
                    Records
                  </Link>
                </li>
              </ul>
            </div>
          </nav>
          <Switch>
            <Route
              exact
              path="/"
              render={() => <Create data={this.receiveData} />}
            />
            <Route
              path="/create"
              render={() => <Create data={this.receiveData} />}
            />
            <Route path="/edit" render={() => <Edit onEdit={this.onEdit} />} />
            <Route
              path="/index"
              render={() => (
                <Index
                  onSearch={this.onSearch}
                  onDelete={this.onDelete}
                  data={datas}
                />
              )}
            />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

Please provide me a solution. Thanks in advance...!!

Answer 1

Add Following CDN to Your public/index.html

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <title>React App</title>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>

Use following Code in for Navbar

      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav">
            <li className="nav-item active">
              <Link to={"/create"} className="nav-link">
                Home
              </Link>
            </li>
            <li className="nav-item">
              <Link to={"/index"} className="nav-link">
                Records
              </Link>
            </li>
          </ul>
        </div>
      </nav>

Reason Behind your code not working

1) Bootstrap has its own js lib and dependency of Jquery(you haven't included) 2) Actually Navbar was there but controls or navitems was not visible because you wrote the responsive Code to show the nav items to visible only in large screens. In mobile screens to show as the collapsible navbar. But you haven't wrote code for toggle of navbar in mobile screen

Answer 2

Add navbar-dark class in your nav tag, so the hamburger menu will be visible.

After, add jquery and bootstrap.js in your project so collapse will work.

Or use react-bootstrap and its best choice because using jQuery in React is not the correct way.