React - How to Export Multiple Components on same File, preventing Component on Dev Tools

Question

okay so if I have one react component I can:

const Home = () => (....)
export default Home;

Now I have a file called About.js where I am exporting multiple components as they're related.

export const Staff = () => (...)

export const Employee = () => (...)

in my App.js

import { Staff, Employee } from "./components/About";

All works, however, react dev-tools says the components above are <Unknown/>

What is best practice to export multiples components from a file avoiding the <Unknown/> output?

Solution Thanks to @Khun on comments bellow

About.js

const Staff = () => (...)
const Employee = () => (...)

export {Staff, Employee}

in my App.js

    import { Staff, Employee } from "./components/About";

That removed the <Unknown/> from react dev tools.

Ps: I understand the discrepancy on best practice, however, this did resolve my question above.

To be honest with you, the best practice would be to only implement one component per file. — Galupuf, Feb 05 '18 at 23:01
Still you need to export multiple components from same file, this would help https://stackoverflow.com/questions/46039976/exporting-multiple-modules-in-react-js — Jayavel, Feb 06 '18 at 05:08

score 6 · Answer 1 · answered Feb 05 '18 at 23:42

6

First, create each components in a different file: Staff.js and Employee.js. Export them like this: export { Staff }; and export { Employee };

Now create another file to handle multiple exports. Let's call it About.js and here is the content:

export * from './Staff';
export * from './Employee';

Now just use it as you did:

import { Staff, Employee } from "./components/About";

answered Feb 05 '18 at 23:42

Khun

202
3
11

1

So diff files for each component, only way to go? – Null isTrue Feb 06 '18 at 00:16
1

If you want your code to scale and be maintainable, that's your best bet. – Galupuf Feb 06 '18 at 00:34
1

@NullisTrue of course you can still use it in the same file but not recommended! Simply create all classes and export them at the bottom. export { Staff, Employee ]; – Khun Feb 06 '18 at 07:43
1

Copy that. Thanks guys! – Null isTrue Feb 06 '18 at 17:12

React - How to Export Multiple Components on same File, preventing Component on Dev Tools

1 Answers1