Bootstrap accordion is not expanding when clicked

Question

The bootstrap accordion is not expanding when clicked. I have installed bootstrap and jquery using npm as local dependency and imported both in root component ie, App.js but for some reason jquery isn't detected it seems. Please correct me If I am doing something wrong.

GenerateMethods component:

import React, { Component } from 'react';
import { browserHistory, Link } from 'react-router';
import Button from 'mineral-ui/Button';
import Popover from 'mineral-ui/Popover';
import Add from 'mineral-ui-icons/IconAdd';
import Delete from 'mineral-ui-icons/IconDelete';
import _ from 'lodash';

export class GenerateMethods extends Component{
    constructor(props){
        super(props);
        this.state = {
            rows: []
        }
    }

    render(){
        let content = [];
        const iconDelete = <Delete />;    
            this.props.uniqueMethods.map((d, i) => {
                let id = `#${d.id}`;
                let elements = <div className="panel list-group">
                    <a href="#" className="list-group-item default" data-toggle="collapse" data-target={id} data-parent="#menu">
                        <b>{d.method}</b> <span className="label label-info">5</span><span className="pull-right" onClick={() => this.props.handleDelete(d.id, d.method)} title="Remove this entry"><Delete /></span>
                    </a>
                    <div id={id} className="sublinks collapse">
                        <div className="list-group-item">
                            TEST4
                        </div>
                        <div className="list-group-item">
                            TEST5
                        </div>
                        <div className="list-group-item">
                            TEST6
                        </div>
                    </div>

                </div>


                content.push(elements)
            });
        return(
            <div id="menu">
                {content}
            </div>
        )
    }
}

Versions:

"bootstrap": "^3.3.6", "jquery": "^2.2.3",

App.js

import 'bootstrap/dist/css/bootstrap.css';
import 'jquery';
import 'bootstrap/dist/js/bootstrap';

index.html

<html>
    <head>
        <link href="https://fonts.googleapis.com/css?family=Cabin+Sketch" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    </head>

    <body>
        <div id="App">
            <!-- this is where the root react component will get rendered -->
        </div>
    </body>
</html>

Answer 1

React works on virtual DOM where as jquery works directly on DOM.I would suggest you to use react-bootstrap package which is meant for react without using jquery.

However,if you want to use bootstrap with jquery in react then you can also include bootstrap dependencies in the index.html as cdn or store the bootstrap dependencies as local files in public folder.And also uninstall bootstrap dependencies from npm.

Bootstrap accordion is not expanding when clicked

Question

1 answers

solution1
1 2018-08-13 06:43:13

Bootstrap accordion is not expanding when clicked

Question

1 answers

solution1 1 2018-08-13 06:43:13

solution1
1 2018-08-13 06:43:13