React - exporting multiple classes in the same file

Question

I am working on a project in react where I have multiple components. I am trying to do it all in JSBin (lol.. I know). But i am having issues with exporting multiple classes.

class Foo extends React.Component {
    constructor(props) {
        super(props);

        this.state = {

        }
    }

    render() {
        return (
            <div></div>
        );
    }
}


class Bar extends React.Component {
    constructor(props) {
        super(props);

        this.state = {

        }
    }

    render() {
        return (
            <div></div>
        );
    }
}

export class Foo{};
export class Bar{};

But I am getting an error of

  Parsing error: Identifier 'Foo' has already been declared
  92 | }
  93 | 
> 94 | export class Foo{};
     |              ^
  95 | export class Bar{};

So then I tried to change it to this

class Foo extends React.Component {...my code}
class Bar extends React.Component {...my code}

and it compiles but I get an runtime error of

Error: Element type is invalid: expected a string (for built-in components) or a class/function       (for composite components) but got: object.

Is it possible to export multiple classes in a single file with react?

https://stackoverflow.com/questions/38340500/export-multiple-classes-in-es6-modules go through the link , its similar to your issue — Kishan Jaiswal, Nov 30 '19 at 05:28
^^ I tried those solutions but I think my error stems from my classes extending React.Component and both having constructors with call to super() ? — eskimo_amigo, Nov 30 '19 at 05:32
did you try just exporting `export class Foo extends React.Component` and remove those two line where you redeclare a class Foo ? `export class Foo{};` — Crocsx, Nov 30 '19 at 06:25

score 3 · Answer 1 · answered Nov 30 '19 at 05:33

3

It's because you are re-declaring the class at the bottom, you can export your classes like the following.

export class Foo extends React.Component {
   // your code
}

export class Bar extends React.Component {
  // your code
}

answered Nov 30 '19 at 05:33

Junius L

15,881
6
52
96

score 1 · Answer 2 · answered Nov 30 '19 at 05:41

You can declare your classes as usual, then export all your classes at the end of the file as the following

class Foo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return <div></div>;
  }
}

class Bar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return <div></div>;
  }
}

export { Foo, Bar };

Or if you prefer, you can export the class as you declare them.

export class Foo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return <div></div>;
  }
}

export class Bar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return <div></div>;
  }
}

Generally its suggested that only export one component per file as per es-lint's rule.

score 0 · Answer 3 · edited Nov 30 '19 at 05:53

0

You can also do:

export Foo;

export Bar;

in the end instead of declaring the class again.

edited Nov 30 '19 at 05:53

Junius L

15,881
6
52
96

answered Nov 30 '19 at 05:44

SAKSHI GOYAL

67
7

React - exporting multiple classes in the same file

3 Answers3