CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-bootstrapbootstrap-accordion
Kavya m
Kavya m

Reputation: 49

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) when added bootstrap accordion

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.

I got this error when I added an Bootstrap Accordion in React. Please find the below code.

import axios from "axios";
import { Accordion } from 'react-bootstrap';


class State extends Component {
    constructor() {
        super();
        this.state = {
            stateData: {}
        }
    }
    render() {
        return (

            <div className="row">
                <div className="col-md-12">
                    <Accordion defaultActiveKey="0">
                        <Accordion.Item eventKey="0">
                            <Accordion.Header>Accordion Item #1</Accordion.Header>
                            <Accordion.Body>
                                Lorem ipsum dolor sit amet,
                            </Accordion.Body>
                        </Accordion.Item>
                        <Accordion.Item eventKey="1">
                            <Accordion.Header>Accordion Item #2</Accordion.Header>
                            <Accordion.Body>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                                est laborum.
                            </Accordion.Body>
                        </Accordion.Item>
                    </Accordion>
                </div>
            </div>
        );
    }
    
}
export default State;```

Dependencies added,

"dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "bootstrap": "^5.0.2",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },

Upvotes: 0

Views: 494

Answers (1)

Adam Jenkins
Adam Jenkins

Reputation: 55623

You need to look at the docs for react-bootstrap for the version that you are using. You were using the docs for the latest bootstrap version (2.0.0-beta.2).

The version you are using doesn't have Accordion.Header. Take a look at the correct docs.

Upvotes: 2

Related Questions