how to export two modules in a single react js component?

Question

I want to export the following modules but I am unable to export.

I tried removing the default and have used const but unable to export, so I had to make another child component to export.

Here is what I tried:

export default  withStyles(styles, { withTheme: true })(app);
export default DragDropContext(HTML5Backend)(app);

Answer 1

You can not export more than one values as default.

In case of default exports:

• you can export a single value
• you can use any name when import

And for named exports

• you can export multiple values
• you must use the exported name when importing

So you could export one as default and one as named.

export default withStyles(styles, { withTheme: true })(app);
export const SecondComponent = DragDropContext(HTML5Backend)(app);

import DefaultComponent, {SecondComponent} from 'module';

Or you could export both as named:

export const FirstComponent = withStyles(styles, { withTheme: true })(app);
export const SecondComponent = DragDropContext(HTML5Backend)(app);

import {FirstComponent, SecondComponent} from 'module';

Read more about export and import

Answer 2

You can use following:

export default withStyles(styles, { withTheme: true })(app);
export const AnotherComponent = DragDropContext(HTML5Backend)(app);

One component can be named, other can be default export