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?

stackoverflow.com/questions/38340500/… go through the link , its similar to your issue — Kishan Jaiswal
– Kishan Jaiswal, Commented Nov 30, 2019 at 5: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
– eskimo_amigo, Commented Nov 30, 2019 at 5: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
– Crocsx, Commented Nov 30, 2019 at 6:25

Junius L · Accepted Answer · 2019-11-30 05:33:04Z

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, 2019 at 5:33

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

junwen-k · Accepted Answer · 2019-11-30 05:41:58Z

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.

Junius L · Accepted Answer · 2019-11-30 05:53:56Z

0

You can also do:

export Foo;

export Bar;

in the end instead of declaring the class again.

edited Nov 30, 2019 at 5:53

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

answered Nov 30, 2019 at 5:44

SAKSHI GOYAL

877 bronze badges

Collectives™ on Stack Overflow

React - exporting multiple classes in the same file

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related