Borislav Hadzhiev
Sat Apr 23 2022·3 min read
Photo by Ash Edmonds
To import a function from another file in React:
A
, e.g. export function sum() {}
.B
as import {sum} from './another-file'
.B
.Here is an example of exporting functions from a file called another-file.js
.
// 👇️ named export export function sum(a, b) { return a + b; } // 👇️ named export export function multiply(a, b) { return a * b; } // 👇️ (arrow function) // export const sum = (a, b) => { // return a + b; // };
The syntax is the same when using arrow functions. All you have to do is use the
export
keyword.
Here is how we would import the functions in a file called App.js
.
// 👇️ named import import {sum, multiply} from './another-file'; export default function App() { return ( <div> <h2>5 + 5 = {sum(5, 5)}</h2> <hr /> <h2>10 * 5 = {multiply(10, 5)}</h2> </div> ); }
Make sure to correct the path that points to the another-file.js
module if you
have to. The example above assumes that another-file.js
and App.js
are
located in the same directory.
For example, if another-file.js
was located one directory up, you'd have to
import as import {sum} from '../another-file'
.
The import/export syntax is called JavaScript modules.
The example above uses a named export and a named import.
The main difference between named and default exports and imports is - you can have multiple named exports per file, but you can only have a single default export.
Let's look at an example of how we would import a function that was exported using a default export.
// 👇️ default export export default function sum(a, b) { return a + b; } // 👇️ arrow functions // const sum = (a, b) => { // return a + b; // } // export default sum;
IMPORTANT: If you are exporting a variable (or an arrow function) as a default export, you have to declare it on 1 line and export it on the next. You can't declare and default export a variable on the same line.
const sum = (a, b) => { return a + b; }; // 👇️ default export (next line) export default sum;
And here is how we would import the function using a default import.
// 👇️ default import import sum from './another-file'; export default function App() { return ( <div> <h2>5 + 5 = {sum(5, 5)}</h2> </div> ); }
Notice that we didn't wrap the import in curly braces.
We could have also used a different name when importing the function, e.g.
foo
.
import foo from './another-file'; export default function App() { return ( <div> <h2>5 + 5 = {foo(5, 5)}</h2> </div> ); }
This works, but is confusing and should be avoided.
You can also mix and match, here is an example of a file that uses both - a default and a named export.
// 👇️ default export export default function sum(a, b) { return a + b; } // 👇️ named export export const multiply = (a, b) => { return a * b; };
And here is how you would import the two functions.
// 👇️ default and named imports import sum, {multiply} from './another-file'; export default function App() { return ( <div> <h2>5 + 5 = {sum(5, 5)}</h2> <hr /> <h2>10 * 5 = {multiply(10, 5)}</h2> </div> ); }
We used a default import to import the sum
function and a named import to
import the multiply
function.
Note that you can only have a single default export per file, but you can have as many named exports as necessary.