Warning: session_start(): open(/tmp/sess_3c4042e502fdf791a0e4d467b0bcc34b, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How To Export Multiple Components From A File In React.js? - LearnShareIT

How To Export Multiple Components From A File In React.js?

Export multiple components from a file in React.js

To export multiple components from a file in React.js, you can apply some methods such as using the export() function or wrapping the code in curly braces ‘{}‘. So how to do it? Let’s go into detail.

How to export multiple components from a file in React.js

The import/export method introduced in ES6 helps you get data from another file. You can export a default component from a file like this:

import './App.css';

function App() {
    return (
        <div className="App">
        	<h1>Hello From Learn Share IT</h1>
        </div>
    );
}

export default App;

Or like this:

import './App.css';

export default function App() {
    return (
        <div className="App">
          	<h1>Hello From Learn Share IT</h1>
        </div>
    );
}

But if you export multiple components like this:

import './App.css';

export default function Greet() {
	return <div>Welcome</div>;
}

export default function App() {
    return (
        <div className="App">
          	<h1>Hello From Learn Share IT</h1>
        </div>
    );
}

It will lead to an error.

Only one default export is allowed per module.

So to do it correctly, you can do the following method.

Wrap in curly braces

Example:

import './App.css';

function Greet() {
	return <h1>Welcome</h1>;
}

function App() {
    return (
        <div className="App">
          	<h1>Hello From Learn Share IT</h1>
        </div>
    );
}

export { Greet, App };

Here I wrap two functions inside curly braces and remove the export default.

Or you can export two functions like this:

Use export

export function Greet() {
	return <h1>Welcome</h1>;
}

export function App() {
    return (
        <div className="App">
          	<h1>Hello From Learn Share IT</h1>
        </div>
    );
}

Remember that when you export like this, you must write the correct name and wrap it inside curly braces exactly as in the export file, import file.

Example:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { Greet, App } from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <Greet />
        <App />
    </React.StrictMode>
);

You also can use export default when exporting multiple files:

Example:

export function Greet() {
	return <h1>Welcome</h1>;
}

export default function App() {
    return (
        <div className="App">
          	<h1>Hello From Learn Share IT</h1>
        </div>
    );
}

Or like this:

export function Greet(){
	return <h1>Welcome</h1>;
}

function App() { 
    return (
        <div className="App">
        	<h1>Hello From Learn Share IT</h1>
        </div>
    );
}

export default App;

With export default, you can set the name optional.

Example:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App, { Greet } from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <Greet />
        <App />
    </React.StrictMode>
);

You can export multiple components but can only export one default component.

Summary

In this tutorial, I’ve shown and explained how to export multiple components from a file in React.js. Just remember that you can only export one default component for each file. Thank you for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *