how to use data-target and data-toggle in Reactjs?

Question

I was converting a static HTML site which uses bootstrap to React.js Here there are several divs which do open only on data-target and data-toggle.

<div className="card-header" id="headingFive">
   <h5 className="mb-0">
      <button
            className="btn btn-link"
            type="button"
            data-toggle="collapse"
            data-target="#collapseFive"
            aria-expanded="true"
            aria-controls="collapseOne">
            Site Wide Events
      </button>
    </h5>
</div>

<div
   id="collapseFive"
   className="collapse show"
   aria-labelledby="headingFive"
   data-parent="#accordionThree">
    <div className="card-body">
        <div className="row">
            <div className="col wall">
                <h4 className="text-center">12</h4>
                <p className="text-center">Target</p>
            </div>
            <div className="col">
                <h4 className="text-center">13</h4>
                <p className="text-center">Actual</p>
            </div>
        </div>
    </div>
</div>

I don't want to use any other npmmodule for the same.

I tried this but was not able to solve.

componentDidUpdate() {
    $('.collapse').bootstrapToggle();
}

Answer 1

Bootstrap 5 (update 2020)

jQuery is no longer required so Bootstrap 5 is easier to use in React. Use the new namespaced data-bs- attributes as explained here or, with React's useEffect useState hooks as explained in this answer.

Bootstrap 4 (original question)

If you don't want to use jQuery or react-bootstrap, you can create a method to toggle the show class on the collapsing Navbar like this...

class Navbar extends React.Component {
    
    constructor(props) {
        super(props);
        this.state = { showNav: true };
        this.toggleNav = this.toggleNav.bind(this);
    }
    
    toggleNav() {
        this.setState({ 
            showNav: !this.state.showNav
        })
    }
    
    render() {
        const { showNav } = this.state
        
        return (
        <div className="navbar navbar-expand-lg navbar-light bg-light">
            <a className="navbar-brand" href="#">Navbar</a>
            <button className="navbar-toggler" type="button" onClick={this.toggleNav}>
                <span className="navbar-toggler-icon"></span>
            </button>
            <div className={(showNav ? 'show' : '') + ' collapse navbar-collapse'}>
                <ul className="navbar-nav mr-auto">
                    <li className="nav-item">
                        <a className="nav-link" href="#">Link</a>
                    </li>
                    ...
                </ul>
            </div>
        </div>
        );
    }
}

Example with Navbar Collapse

---

Example with Collapse

Answer 2

// Import the following in your App.js

import 'jquery/dist/jquery.min.js'; // Have to install and import jQuery because of bootstrap modal's dependency
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Bootstrap dependency https://getbootstrap.com/docs/4.0/getting-started/introduction/#js

Note: I am assuming that your structuring is correct.

Answer 3

Change data-toggle to data-bs-toggle and data-target to data-bs-target. Just managed to find this out myself after looking for ages and not finding a solution anywhere!

Answer 4

Use the new namespaced data-bs- attributes eg.

 <button className='btn btn-outline-info btn-block' data-bs-toggle='modal' data-bs-target='#add'> <i className='fas fa-plus'>Add</i> </button>