1

Am trying to implement bootstrap accordion.

Was using V5, did not work, downgraded to v4 (no big deal) and still not working.

Tried everything and got no animations (collapse and show) then went so far as to copy the code from the bootstrap website and still not animating.

Not getting console errors either. I don't think i need to use an onClick as it should be able to show/collapse without but can't get it.

code:

<div className="accordion" id="accordionExample">
                <div className="card">
                    <div className="card-header" id="headingOne">
                        <h2 className="mb-0">
                            <button className="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Collapsible Group Item #1
                            </button>
                        </h2>
                    </div>

                    <div id="collapseOne" className="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div className="card-body">
                            Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> className.
                        </div>
                    </div>
                </div>
            </div>

Maybe dependency conflict?

package.json dependencies:

 "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@material-ui/core": "^4.11.4",
    "@material-ui/lab": "^4.0.0-alpha.58",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "bootstrap": "4.6.0",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-credit-cards": "^0.8.3",
    "react-dom": "^17.0.2",
    "react-facebook-login": "^4.1.1",
    "react-google-button": "^0.7.2",
    "react-responsive-modal": "^6.1.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "redux-persist": "^6.0.0",
    "sass": "^1.35.1",
    "styled-components": "^5.3.0",
    "swiper": "^6.7.1",
    "web-vitals": "^1.0.1"
user15779299
  • 81
  • 2
  • 9

1 Answers1

0

In react you have to use react-bootstrap library.

Remember also to do this part:

{/* The following line can be included in your src/index.js or App.js file*/}
import 'bootstrap/dist/css/bootstrap.min.css';
Sowam
  • 1,674
  • 3
  • 12
  • 30
  • Thank you for responding! I was using react-bootstrap but then got this error: vendors~main.chunk.js:102637 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. – user15779299 Aug 04 '21 at 19:15
  • Are you sure that you put it in main `index.js` file on the top ? – Sowam Aug 04 '21 at 19:23
  • Definitely, have been using the Grid system throughout this project – user15779299 Aug 04 '21 at 19:27
  • Updating from react-bootstrap 1.6.1 to 2.0.0-beta.0 solved it https://stackoverflow.com/questions/68320933/react-bootstrap-accordion-not-loading – user15779299 Aug 04 '21 at 19:41
  • I'll suggest you follow the method here on React Bootstrap Docs: https://react-bootstrap.github.io/components/accordion/ – Qudusayo Aug 04 '21 at 20:00