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

43,622

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};
Share:
43,622

Related videos on Youtube

Tony Carbetta
Author by

Tony Carbetta

Updated on February 04, 2021

Comments

  • Tony Carbetta
    Tony Carbetta over 1 year

    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;
    
  • Tony Carbetta
    Tony Carbetta over 4 years
    Sounds good! I'm new to stack overflow too, how do i close out the question and give you credit?
  • Tony Carbetta
    Tony Carbetta over 4 years
    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
    Denys Kotsur over 4 years
    @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
    Waleed Mohsin almost 2 years
    do not close the question and mark it as accepted answer.