Using Bootstrap React Accordion

Question

I want to use Bootstrap's Accordion in my React project and I downloaded npm package for it.

So basically I want to use it like this:

import React, { useState, useEffect } from "react";

// reactstrap components
import {
  Card,
  CardBody,
  CardHeader,
  CardTitle,
  Row,
  Col,
} from "reactstrap";

import Accordion from 'react-bootstrap/Accordion';

// core components
import PanelHeader from "components/PanelHeader/PanelHeader.js";


export default function Orders() {

  return (
    <>
      <PanelHeader size="sm" />
      <div className="content">
        <Row>
          <Col xs={12}>
            <Card>
              <CardHeader>
                <CardTitle tag="h4">ORDERS</CardTitle>
              </CardHeader>
              <CardBody>
              <Accordion defaultActiveKey="0">
                <Card>
                  <Accordion.Toggle as={Card.Header} eventKey="0">
                    Click me!
                  </Accordion.Toggle>
                  <Accordion.Collapse eventKey="0">
                    <Card.Body>Hello! I'm the body</Card.Body>
                  </Accordion.Collapse>
                </Card>
                <Card>
                  <Accordion.Toggle as={Card.Header} eventKey="1">
                    Click me!
                  </Accordion.Toggle>
                  <Accordion.Collapse eventKey="1">
                    <Card.Body>Hello! I'm another body</Card.Body>
                  </Accordion.Collapse>
                </Card>
              </Accordion>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </div>
    </>
  );
}

But I am getting an error like this: 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.

So do you have any idea why I am getting this error?

Thanks...

Answer 1

Ok, as I was saying in the comments its an issue of the modules you're importing.

You're using

import {
  Card,
  CardBody,
  CardHeader,
  CardTitle,
  Row,
  Col,
} from "reactstrap";

for your Card components, but you're using the Accordion.Toggle as={Card.Header} from the API doc example. Here they are using the <Card /> component within the package 'react-bootstrap' . To get the header from this Card, you call it as a property of the Card object like this: Card.Header .

You are using <CardHeader /> from 'reactstrap' so you need to do this in your Accordion.Toggle components:

//this
Accordion.Toggle as={CardHeader}

//not this

Accordion.Toggle as={Card.Header}

Such a little thing, but be careful when using multiple styling packages because they often have very similar names!

Additionally, and I would recommend this

Use just one library for your style components. If 'reactstrap' doesn't have that Accordion functionality you're looking for, consider using the style components from 'react-bootstrap' instead.

This way you can be sure that you're always using the same component that you're important and one little period or dot doesn't crash your program.

I use Material UI : '@material-ui/core' so I'm a bit biased here, but I absolutely love it,