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:
- How to create a Delay function in React
- How to Prevent form submission in React
- Combine multiple inline Style objects in React
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm