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;

Possible duplicate of [Multiple React components in a single module](https://stackoverflow.com/questions/30762734/multiple-react-components-in-a-single-module) — Amanshu Kataria, Apr 28 '18 at 07:33

score 45 · Answer 1 · answered Apr 28 '18 at 05:38

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.

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. — Tony Carbetta, Apr 28 '18 at 05:58
@TonyCarbetta Yes. Following the [Single responsibility](https://en.wikipedia.org/wiki/Single_responsibility_principle) 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](https://reactjs.org/docs/thinking-in-react.html) article from the docs and may be it can help you to understand. — Denys Kotsur, Apr 28 '18 at 06:03

score 6 · Answer 2 · answered Apr 28 '18 at 05:14

6

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'

answered Apr 28 '18 at 05:14

Jess Kenney

389
1
3

Sounds good! I'm new to stack overflow too, how do i close out the question and give you credit? – Tony Carbetta Apr 28 '18 at 05:33
do not close the question and mark it as accepted answer. – Waleed Mohsin Oct 09 '20 at 00:51

score 3 · Answer 3 · answered Oct 20 '20 at 15:07

3

export default secretContext;
export {taskData};

answered Oct 20 '20 at 15:07

azeem

341
3
4

score 0 · Answer 4 · answered Feb 04 '21 at 07:33

for export two function component

do this in app.js

export default App;
export{New_component};

do this in index.js

import App from './App';
import {Hari} from './App';

<App  name={people.name}/>
<New_component msg={people.msg}/>

make sure component name start with capital letter

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

4 Answers4