How to use data toggle collapse in Reactjs with Bootstrap?

Question

I am using pure Bootstrap with Reactjs and I have build a navBar using Bootstrap component but the problem I am facing is with data toggle collapse it is not working.

When I shrink my display view size then the hamburger icon becomes visible but when I click on it then nothing happens. While it works perfect with pure HTML and JS but not working with reactjs.

Here is index.js file

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Here is app.js

import React, { Component } from 'react';
import './App.css';
import NavBar from './components/navBar/navBar';

class App extends Component {
  render() {
    return (
      <div>
      <NavBar />
    </div>
    );
  }
}

export default App;

here is NavBar.js file

import React, { Component } from 'react';

class NavBar extends Component {
  render() {
    return (
      <div>

        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <a className="navbar-brand" href="/">Navbar</a>
          <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">
              <a className="nav-item nav-link active" href="/">Home <span class="sr-only">(current)</span></a>
              <a className="nav-item nav-link" href="/">Features</a>
              <a className="nav-item nav-link" href="/">Pricing</a>
              <a className="nav-item nav-link" href="/">logout</a>
            </div>
          </div>
        </nav>
      </div>
    );
  }
}

export default NavBar;

This is complete code I have used for navBar.

The reason is, that resizing window and appearance of the menu button is CSS thing. But the drop-down functionality is a JS thing (Bootstrap JS library). Since React is also JS thing, these two things "clash". My input would be to NOT rely on Bootstrap in this matter and create your own pure React functionality... it's just a click of a button — Ludovit Mydla
– Ludovit Mydla, Commented Sep 9, 2018 at 19:59
Don't include bootstrap.min.js and jquery, use react component, react-bootstrap.github.io/getting-started/introduction — Ayushya
– Ayushya, Commented Sep 9, 2018 at 20:03
@LudovitMydla okay but how to create pure react functionality? — Neha Sharma
– Neha Sharma, Commented Sep 9, 2018 at 20:15

isherwood · Accepted Answer · 2021-09-09 16:24:23Z

26

Bootstrap menu toggle is a JS functionality. It's not a good idea to mix the JS part of Bootstrap with ReactJS, since both libraries manipulate the DOM and it can lead to bigger problems.

I suggest implementing the small functionality you need. Most of the menu toggle is just a class toggle thing.

import React, { Component } from "react";

export default class Menu extends Component {

  constructor(props) {
    super(props);
    this.state = {
      menu: false
    };
    this.toggleMenu = this.toggleMenu.bind(this);
  }

  toggleMenu(){
    this.setState({ menu: !this.state.menu })
  }

  render() {

  const show = (this.state.menu) ? "show" : "" ;

  return (

    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <a className="navbar-brand" href="/">Navbar</a>
      <button className="navbar-toggler" type="button" onClick={ this.toggleMenu }>
        <span className="navbar-toggler-icon"></span>
      </button>
      <div className={"collapse navbar-collapse " + show}>
        <div className="navbar-nav">
          <a className="nav-item nav-link active" href="/">Home <span class="sr-only">(current)</span></a>
          <a className="nav-item nav-link" href="/">Features</a>
          <a className="nav-item nav-link" href="/">Pricing</a>
          <a className="nav-item nav-link" href="/">logout</a>
        </div>
      </div>
    </nav>

  );
  }
}

edited Sep 9, 2021 at 16:24

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Sep 9, 2018 at 20:10

Davo

9868 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bruno Over a year ago

There is an animation/transition associated with the bootstrap collapse, which is lost with this approach.

saurish · Accepted Answer · 2020-12-29 02:07:13Z

3

There is an equivalent library called "react-bootstrap" that you can use to style your components the same way as you would use bootstrap https://react-bootstrap.github.io. This way you can follow react and bootstrap best practices without making unnecessary manipulations to do DOM which can sometimes bring unwanted side effects.

edited Dec 29, 2020 at 2:07

saurish

781 silver badge12 bronze badges

answered Oct 12, 2020 at 13:07

Zivojin Milutinovic

9987 silver badges16 bronze badges

1 Comment

Yohanes Pradono Over a year ago

but what if the button is in different component?

Ostrich96 · Accepted Answer · 2021-02-09 10:06:24Z

2

Best Solution is the simplest :

<div style={show?{display:"block"}:{display:'none'}} className={"collapse navbar-collapse"}>........</div>

where show is a : const [show, setShow]=React.useState(false);

and on the button: onClick={()=>setShow(!show)}

answered Feb 9, 2021 at 10:06

Ostrich96

11410 bronze badges

Collectives™ on Stack Overflow

How to use data toggle collapse in Reactjs with Bootstrap?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related