How to use multiple modules on one page?

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: How to use multiple modules on one page?

hussy asked 6 years ago

I got an error when i tried to compile multiple modules on one page. Error is: "Parsing error: Only one default export allowed per module.

import React from "react";
import { Doughnut } from "react-chartjs-2";
import { MDBContainer } from "mdbreact";

export class ChartsPage extends React.Component {
state = {
dataDoughnut: {
labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
datasets: [
{
data: [300, 50, 100, 40, 120],
backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
hoverBackgroundColor: [
"#FF5A5E",
"#5AD3D1",
"#FFC870",
"#A8B3C5",
"#616774"
]
}
]
}
}

render() {
return (
<MDBContainer>
<h3 className="mt-5">Radar chart</h3>
<Doughnut data={this.state.dataDoughnut} options={{ responsive: true }} />
</MDBContainer>
);
}
}

export default ChartsPage;


import React, { Component } from "react";
import { Carousel, CarouselCaption, CarouselInner, CarouselItem, View, Mask } from "mdbreact";

class CarouselPage extends Component {
render() {
return (
<Carousel activeItem={1} length={4} showControls={true} showIndicators={true} className="z-depth-1">
<CarouselInner>
<CarouselItem itemId="1">
<View>
<img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide" />
<Mask overlay="black-light" />
</View>
<CarouselCaption>
<h3 className="h3-responsive">Light mask</h3>
<p>First text</p>
</CarouselCaption>
</CarouselItem>
<CarouselItem itemId="2">
<View>
<img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(99).jpg" alt="Second slide" />
<Mask overlay="black-strong" />
</View>
<CarouselCaption>
<h3 className="h3-responsive">Strong mask</h3>
<p>Second text</p>
</CarouselCaption>
</CarouselItem>
<CarouselItem itemId="3">
<View>
<img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg" alt="Third slide" />
<Mask overlay="black-slight" />
</View>
<CarouselCaption>
<h3 className="h3-responsive">Slight mask</h3>
<p>Third text</p>
</CarouselCaption>
</CarouselItem>
<CarouselItem itemId="4">
<View>
<img className="d-block w-100" src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20%28143%29.jpg" alt="Mattonit's item" />
<Mask overlay="black-light" />
</View>
<CarouselCaption>
<h3 className="h3-responsive">Sopot Beach</h3>
<p>Taken june 21th by @mattonit</p>
</CarouselCaption>
</CarouselItem>
</CarouselInner>
</Carousel>
);
}
}

export default CarouselPage;

 

Anna Morawska staff answered 6 years ago

Soon we release a tutorial for those who just started with React, so stay tuned.

About your question - You can have multiple components in one file, but it is better to separate those into their own files ( one component = one file ).

I made some changes in your code ( for example, you can't have multiple imports from the same module in one file, so I moved all imports to the one statement:

import { MDBContainer, MDBCarousel, MDBCarouselCaption, MDBCarouselInner, MDBCarouselItem, MDBView, MDBMask } from "mdbreact";
Try to paste it to App.js file in your create-react-app project.
 
import React, { Component } from "react";
import { Doughnut } from "react-chartjs-2";
import { MDBContainer, MDBCarousel, MDBCarouselCaption, MDBCarouselInner, MDBCarouselItem, MDBView, MDBMask } from "mdbreact";

class ChartsPage extends Component {
  state = {
    dataDoughnut: {
      labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
      datasets:
        [
          {
            data: [300, 50, 100, 40, 120],
            backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
            hoverBackgroundColor:
              [
              "#FF5A5E",
              "#5AD3D1",
              "#FFC870",
              "#A8B3C5",
              "#616774"
              ]
          }
      ]
    }
  }
  render() {
    return (
      <MDBContainer>
        <h3 className="mt-5">Radar chart</h3>
        <Doughnut data={this.state.dataDoughnut} options={{ responsive: true }} />
      </MDBContainer>
    );
  }
}

class CarouselPage extends Component {
  render() {
    return (
      <MDBCarousel activeItem={1} length={4} showControls={true} showIndicators={true} className="z-depth-1">
        <MDBCarouselInner>
          <MDBCarouselItem itemId="1">
          <MDBView>
          <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide" />
          <MDBMask overlay="black-light" />
          </MDBView>
          <MDBCarouselCaption>
          <h3 className="h3-responsive">Light mask</h3>
          <p>First text</p>
          </MDBCarouselCaption>
          </MDBCarouselItem>
          <MDBCarouselItem itemId="2">
          <MDBView>
          <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(99).jpg" alt="Second slide" />
          <MDBMask overlay="black-strong" />
          </MDBView>
          <MDBCarouselCaption>
          <h3 className="h3-responsive">Strong mask</h3>
          <p>Second text</p>
          </MDBCarouselCaption>
          </MDBCarouselItem>
          <MDBCarouselItem itemId="3">
          <MDBView>
          <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg" alt="Third slide" />
          <MDBMask overlay="black-slight" />
          </MDBView>
          <MDBCarouselCaption>
          <h3 className="h3-responsive">Slight mask</h3>
          <p>Third text</p>
          </MDBCarouselCaption>
          </MDBCarouselItem>
          <MDBCarouselItem itemId="4">
          <MDBView>
          <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20%28143%29.jpg" alt="Mattonit's item" />
          <MDBMask overlay="black-light" />
          </MDBView>
          <MDBCarouselCaption>
          <h3 className="h3-responsive">Sopot Beach</h3>
          <p>Taken june 21th by @mattonit</p>
          </MDBCarouselCaption>
          </MDBCarouselItem>
        </MDBCarouselInner>
      </MDBCarousel>
    );
  }
}

export default () => {
  return(
    <>
      <CarouselPage />
      <ChartsPage />
    </>
  )
}

If you have any further question, just ask here.
Best,
Ania

hussy commented 6 years ago

Hi Anna,

I am very much thankful to you for your cooperation and immediate response.The issue I was resolving a week ago now solved in just a matter of minutes.It was looking like a tough task to me but your help made this issue so simple and smart.

Please accept my thanks for all that you have done to help me. Bunch of thanks again.

 

Anna Morawska staff commented 6 years ago

Hi, thank you for your kind words! Happy to help :) 

Anna Morawska staff answered 6 years ago

Hi there,

welcome on our support board. 

If I understand you correctly,  the code you attached is located in one file, right? If so, please notice, that you can't have multiple 

export default

statement in one file.  Add the export keyword to the second component, as you did here: 

export class ChartsPage  

It should help.

Best, Ania

hussy commented 6 years ago

Hi Anna,

I want to run both the modules on one page but as you said that we can not use multiple export default keyword in one file.I tried to use the export keyword in second component but it still doesn't work.

As I am new to react , just facing some difficulties in resolving this issue.Can you give me some example?another query  is that is there any need to create second file to run the second component or we can do it together?  
Write
Create snippet
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: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: Dell
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: No
Tags
react bootstrap
Related topics
1
Feature to turn off searching for one column only in React Material Datatables
0
ResizeObserver loop completed with undelivered notifications Error on Resize
0
Connect Bootstrap to React
0
MDB jQuery and React version together - howto use it?
0
Witch is the Correct detailed procedure to set "Node.js - Bootstrap - MDB - React" dev environment on windows ?
About author
hussy
5Support score
1Questions 0Answers
0Snippets likes 0Snippets