How do I export more than one class component with React JS?

Question

I'm new to React and would like to keep all my components in one file. How do I export more than one component and keep them in the same file?

    import React, { Component } from "react";

class MyText extends Component {
  render() {
    return (<div>
      <h1>
        Component</h1>
      <p>This class component is named MyText. I can re-use it's code by simply Rendering (fancy name for calling) it by it's class name and I won't have to re type it, however many times I will need it.</p>
    </div>);
  };
}

class GreetName extends Component {
  render() {
    return (
      <div>
       <h1>Hello, {this.props.name}</h1>;
       </div>
    );
  };
}

export default MyText;

Solution 1

You can do as Jess Kenney said or use naming export at the bottom of your file:

SomeComponent.js

import React, { Component } from "react";

class MyText extends Component {
  render() {
    return (<div>
      <h1>
        Component</h1>
      <p>This class component is named MyText. I can re-use it's code by simply Rendering (fancy name for calling) it by it's class name and I won't have to re type it, however many times I will need it.</p>
    </div>);
  };
}

class GreetName extends Component {
  render() {
    return (
      <div>
       <h1>Hello, {this.props.name}</h1>;
       </div>
    );
  };
}

export { MyText, GreetName };

And then use it like:

import { MyText, GreetName } from './SomeComponent'

I advice you to use one component per file, so you can keep your project modular. In ReactJS it's a convention to export one component from a file, and to export it is as the default export.

If it's helper component which used only in the particular you can put it to the same file as functional component.

Solution 2

Instead of using the export default line at the bottom, you can put export before each class definition, like export class GreetName... then to include your classes in another file you can use import {MyText, GreetName} from 'your/file.js'

Solution 3

export default secretContext;
export {taskData};

Comments

[Amanshu Kataria]

Possible duplicate of Multiple React components in a single module

[Tony Carbetta]

Sounds good! I'm new to stack overflow too, how do i close out the question and give you credit?

[Tony Carbetta]

oh wow, really? It just seems like it would be alot of extra files. I'm still not understanding why , but I'm just getting my feet wet with React so I'm sure I will run into a reason why later when I'm making a larger application.

[Denys Kotsur]

@TonyCarbetta Yes. Following the Single responsibility principle every component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents. You can read this article from the docs and may be it can help you to understand.

[Waleed Mohsin]

do not close the question and mark it as accepted answer.