How to use multiple modules on one page?

Topic: How to use multiple modules on one page?

hussy free 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 (

<h3 className="mt-5">Radar chart</h3>

</MDBContainer>

);

}

export default ChartsPage;

import React, { Component } from "react";

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

class CarouselPage extends Component {

render() {

return (

<View>

</View>

<h3 className="h3-responsive">Light mask</h3>

<p>First text</p>

</CarouselCaption>

</CarouselItem>

<View>

</View>

<h3 className="h3-responsive">Strong mask</h3>

<p>Second text</p>

</CarouselCaption>

</CarouselItem>

<View>

</View>

<h3 className="h3-responsive">Slight mask</h3>

<p>Third text</p>

</CarouselCaption>

</CarouselItem>

<View>

</View>

<h3 className="h3-responsive">Sopot Beach</h3>

<p>Taken june 21th by @mattonit</p>

</CarouselCaption>

</CarouselItem>

</CarouselInner>

</Carousel>

);

}

export default CarouselPage;

Add comment

Anna Morawska staff answered 6 years ago

1 0 Best answer

<p>Soon we release a tutorial for those who just started with React, so stay tuned.</p><p>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 ).</p><p>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:</p><div><pre class="code-toolbar grey lighten-2 p-3 mb-3">import { MDBContainer, MDBCarousel, MDBCarouselCaption, MDBCarouselInner, MDBCarouselItem, MDBView, MDBMask } from "mdbreact";</pre>Try to paste it to App.js file in your create-react-app project.</div><div> </div><div><pre class="code-toolbar grey lighten-2 p-3 mb-3">import React, { Component } from "react";<br />import { Doughnut } from "react-chartjs-2";<br />import { MDBContainer, MDBCarousel, MDBCarouselCaption, MDBCarouselInner, MDBCarouselItem, MDBView, MDBMask } from "mdbreact";<br /><br />class ChartsPage extends Component {<br />  state = {<br />    dataDoughnut: {<br />      labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],<br />      datasets:<br />        [<br />          {<br />            data: [300, 50, 100, 40, 120],<br />            backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],<br />            hoverBackgroundColor:<br />              [<br />              "#FF5A5E",<br />              "#5AD3D1",<br />              "#FFC870",<br />              "#A8B3C5",<br />              "#616774"<br />              ]<br />          }<br />      ]<br />    }<br />  }<br />  render() {<br />    return (<br />      <MDBContainer><br />        <h3 className="mt-5">Radar chart</h3><br />        <Doughnut data={this.state.dataDoughnut} options={{ responsive: true }} /><br />      </MDBContainer><br />    );<br />  }<br />}<br /><br />class CarouselPage extends Component {<br />  render() {<br />    return (<br />      <MDBCarousel activeItem={1} length={4} showControls={true} showIndicators={true} className="z-depth-1"><br />        <MDBCarouselInner><br />          <MDBCarouselItem itemId="1"><br />          <MDBView><br />          <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide" /><br />          <MDBMask overlay="black-light" /><br />          </MDBView><br />          <MDBCarouselCaption><br />          <h3 className="h3-responsive">Light mask</h3><br />          <p>First text</p><br />          </MDBCarouselCaption><br />          </MDBCarouselItem><br />          <MDBCarouselItem itemId="2"><br />          <MDBView><br />          <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(99).jpg" alt="Second slide" /><br />          <MDBMask overlay="black-strong" /><br />          </MDBView><br />          <MDBCarouselCaption><br />          <h3 className="h3-responsive">Strong mask</h3><br />          <p>Second text</p><br />          </MDBCarouselCaption><br />          </MDBCarouselItem><br />          <MDBCarouselItem itemId="3"><br />          <MDBView><br />          <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg" alt="Third slide" /><br />          <MDBMask overlay="black-slight" /><br />          </MDBView><br />          <MDBCarouselCaption><br />          <h3 className="h3-responsive">Slight mask</h3><br />          <p>Third text</p><br />          </MDBCarouselCaption><br />          </MDBCarouselItem><br />          <MDBCarouselItem itemId="4"><br />          <MDBView><br />          <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20%28143%29.jpg" alt="Mattonit's item" /><br />          <MDBMask overlay="black-light" /><br />          </MDBView><br />          <MDBCarouselCaption><br />          <h3 className="h3-responsive">Sopot Beach</h3><br />          <p>Taken june 21th by @mattonit</p><br />          </MDBCarouselCaption><br />          </MDBCarouselItem><br />        </MDBCarouselInner><br />      </MDBCarousel><br />    );<br />  }<br />}<br /><br />export default () => {<br />  return(<br />    <><br />      <CarouselPage /><br />      <ChartsPage /><br />    </><br />  )<br />}</pre></div><p>If you have any further question, just ask here.<br />Best,<br />Ania</p>

Please insert min. 20 characters.

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 free 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 :)

Add comment

Anna Morawska staff answered 6 years ago

0 0 Best answer

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 free 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?

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

hussy

5Support score
1Questions 0Answers 0Snippets