Topic: What is the best way to use / implement the complex MDB components in React

pcdavis pro asked 4 years ago

I am running into some challenges using some of the complex MDB components. Here is the error I get:
../../MDB/CollapsePage' does not contain an export named 'CollapsePage'
Below is how I implement MDB components. Any feedback or instructions on a better method would be greatly appreciated. If the MDB component is small, I just import { MDBComponentName } at the top of my React component and then place the <MDBComponentName  /> in the return statement of my React component.  But when the MDB component is complex, like CollapsePage, this is the process I use: Note: in this example, I'll show you how I tried to implement MDB's Accordion CollapsePage:
  1. Create a new folder called MDB in my src
  2. Create a file in the MDB folder called CollapsePage.js
  3. Copy all the code from the CollapsePage example on MDB's website and paste it into my CollapsePage.js
  4. Add the following at the top of the CollapsePage.js file: import React, { Component } from "react"; import {Card, Collapse, CardBody } from "mdbreact";
  5. I add "export default" in front of "class CollapsePage extends Component"
  6. I then navigate to the one of my react components where I want to import and use the newly create CollapsePage  component.
  7. At the top of my react component, I type import {CollapsePage } from '../.../MDB/CollapsePage'
  8. Then I place <CollapsePage  /> somewhere in the return statement of my react component and make sure everything is wrapped with a surrounding div.
As soon as I place <CollapsePage  /> in my return statement  I get the error:
../../MDB/CollapsePage' does not contain an export named 'CollapsePage'

jkilbride free answered 4 years ago

It looks like you're mixing default and named exports. Try removing the brackets from your import statement:

import CollapsePage from '../../MDB/CollapsePage';

pcdavis pro commented 4 years ago

Dooah! Thank you!!

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No