Are you confused because you do not know how to export multiple components from a file in React.js or which methods are the easiest and most effective? Then you can refer to this article. We have mentioned below possible ways that may be helpful for you. Now, let’s dive into each method.

What should we do to export multiple components from a file in React.js?

In React, a component is considered one of the indispensable building blocks. That means all applications developed in React will be made up of components. Thanks to those components, the task of setting up the user interface is a lot easier. A component can be seen as a user interface separated into individual components. Then those components merge into one parent component, the final human interface.

Method 1: Use named report

Syntax:

export { myFunction2, myVariable2 };

The first method to export multiple components from a file in React.js is to use named export. In named export, you need to export:

export function ComponentName(){

  //JSX code

}

And a file can also contain multiple named export files.

import React from 'react';

export function ToDoList() {

  return (

    <>

      <h1>ToDo List</h1>

      <ul>

        <li>Eat</li>

        <li>Sleep</li>

        <li>Repeat</li>

      </ul>

    </>

  );

}

export function ShoppingList() {

  return (

    <>

      <h1>Shopping List</h1>

      <ol>

        <li>Designer Jacket</li>

        <li>Floral Dress</li>

      </ol>

    </>

  );

}

After it is declared, you will need to export it as an object if you want to export the component.

import React from 'react';

function ToDoList() {

  return (

    <>

      <h1>ToDo List</h1>

      <ul>

        <li>Eat</li>

        <li>Sleep</li>

        <li>Repeat</li>

      </ul>

    </>

  );

}

function ShoppingList() {

  return (

    <>

      <h1>Shopping List</h1>

      <ol>

        <li>Designer Jacket</li>

        <li>Floral Dress</li>

      </ol>

    </>

  );

}

export { ToDoList, ShoppingList }

For exported component you import as below:

import { ComponentName } from './ComponentFile.js';

As seen above, curly braces were used to import named exported components. Now, to import ToDoList and ShoppingList into App.js file, just follow this:

import React from 'react';

import { ToDoList, ShoppingList } from './Lists.js';

export default function App() {

  return (

    <>

      <ToDoList />

      <ShoppingList />

    </>

  );

}

Method 2: Default export a component

The last method we offer is default export a component; the prerequisite to applying it is that you need to use export default.

Syntax:

export { myFunction as default };

A small note for this method: default export is actually another type of export, but the difference is that it only allows each file to contain one default exported component. For that reason, if you need to export multiple components in one file, you can try exporting one of them as default and as a named export for the rest.

import React from 'react';

export default function ToDoList() {

  return (

    <>

      <h1>ToDo List</h1>

      <ul>

        <li>Eat</li>

        <li>Sleep</li>

        <li>Repeat</li>

      </ul>

    </>

  );

}

export function ShoppingList() {

  return (

    <>

      <h1>Shopping List</h1>

      <ol>

        <li>Designer Jacket</li>

        <li>Floral Dress</li>

      </ol>

    </>

  );

}

And here’s how to import the default exported component:

import ComponentName from './ComponentFile.js';

Conclusion

Above are the methods that you can try to export multiple components from a file in React.js. If you have questions or maybe suggestions about other possible methods, do not hesitate to write them down in the comments section. Thank you for taking the time to read the article, good luck!

Read more:

→ Export ‘default’ (imported as ‘Vue’) was not found in ‘vue’- How To Solve It?