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: https://mdbootstrap.com/react/advanced/collapse/#events
  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 https://mdbootstrap.com/react/advanced/collapse/#events 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.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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