Import Functions from another file in React

Import Functions from another file in React #

To import a function from another file in React:

1. Export the function from file A, e.g. export function sum() {}.
2. Import the function in file B as import {sum} from './another-file'.
3. Use the imported function in file B.

Here is an example of exporting functions from a file called another-file.js.

Copied!
// 👇️ 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.

Copied!
// 👇️ 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.

Copied!
// 👇️ 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.

Copied!
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.

Copied!
// 👇️ 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.

Copied!
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.

Copied!
// 👇️ 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.

Copied!
// 👇️ 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.