CODEWITHSUNDEEP
react-bootstrap
The E
The E

Reputation: 747

Why is Bootstrap accordion not working in React?

I have started a new app using React and react-bootstrap. There is only one component outside the App.js file. The contents:

import React from 'react';
import { Accordion, Button, Card } from 'react-bootstrap';

const accordionDemo = (props) => (
  <Accordion defaultActiveKey="0">
    <Card>
      <Card.Header>
        <Accordion.Toggle as={Button} variant="link" eventKey="0">
          Card one
        </Accordion.Toggle>
      </Card.Header>
      <Accordion.Collapse eventKey="0">
        <Card.Body>Body of Card One.</Card.Body>
      </Accordion.Collapse>
    </Card>
    <Card>
      <Card.Header>
        <Accordion.Toggle as={Button} variant="link" eventKey="1">
          Card two
        </Accordion.Toggle>
      </Card.Header>
      <Accordion.Collapse eventKey="1">
        <Card.Body>Body of Card Two.</Card.Body>
      </Accordion.Collapse>
    </Card>
  </Accordion>
  );
  
  export default accordionDemo;

This results in a button and text displaying for each card in the code. The buttons don't do anything except create a warning in the console: index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode.

  1. A warning should break, right?
  2. is this a react-bootstrap wide problem? Or perhaps Boottstrap?
  3. Do I need to manually import some CSS? I thought The react components would come with that styling already.

Upvotes: 1

Views: 3216

Answers (1)

The E
The E

Reputation: 747

So I was foolish. I did not have the bootstrap scss imported into my main scss file. And... that was everything.

The answer, therefore, is yes, you DO need to import CSS separately when using react-bootstrap -- as per https://react-bootstrap.github.io/docs/getting-started/introduction

Upvotes: 4

Related Questions