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?

Answer 1

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
}