Bootstrap accordion is not expanding when clicked
Clash Royale CLAN TAG#URR8PPP
Bootstrap accordion is not expanding when clicked
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 i.e., 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>
On more about integrationg React with DOM manipulating libraries, such as jQuery, read docs. As a workaround, you can use
window.$ instead of $ in your code (not recommended). Also read React + jQuery.– Andrei Gheorghiu
Aug 13 at 6:23
window.$
$
Why do you think
bootstrap.js requires jquery.js, Hemadri? Or, to be more exact, how do you think the bootstrap collapse works? It's a $('.collapse').collapse() call. It's just that Bootstrap makes it for you, you don't have to init them yourself (you simply use classes).– Andrei Gheorghiu
Aug 13 at 6:32
bootstrap.js
jquery.js
$('.collapse').collapse()
If you want to use Bootstrap, use react-bootstrap, which has the components "react"-ified. You shouldn't expect adding jQuery + jQuery dependent libraries to simply work.
– Andrei Gheorghiu
Aug 13 at 6:34
Thanks @AndreiGheorghiu
– Think-Twice
Aug 13 at 7:18
1 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.
cdn
local files
Ok I removed bootstrap and jquery and installed react-bootstrap. So does this also supports the bootstrap classes which I am already using in my components or do I need bootstrap lib as well if react-bootstrap doesn't support bootstrap css class names?
– Think-Twice
Aug 13 at 6:59
react-bootstrap has its own built in react components and controlled by its props defined.You don't need to declare any classes.You don't need external bootstrap library when using with react-bootstrap.
– CodeZombie
Aug 13 at 7:07
Understood Karthik but, my question is I have bootstrap classes in many components. So will that work if I remove bootstrap and install react-bootstrap?
– Think-Twice
Aug 13 at 7:17
ok,It does not work.if you are already using bootstrap in many components then don't install react-bootstrap.just add jquery and popper.min.js in the index.html .So that there wont be any issues.
– CodeZombie
Aug 13 at 7:23
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Possible duplicate of React-bootstrap accordion not working properly
– Andrei Gheorghiu
Aug 13 at 6:20