How can I use a function from another file in react?

Question

I would like to create a file (function.js) for a function that does this:

let i = 0;
    if (this === that) {
        i = 0;
    } else {
       i = 1;
    }

I would then like to add it to (this.js)

import function from "./function";
class Example extends Component {
    state = {
        test
    };
    render() {
        function()
    return (
        <div>
            <h1>{this.state.test.sample[i].name}</h1>
        </div>

Hi, try exporting function in functions file, and import it in your other file. so the exporting statement would be like export default functionName; — Asim Khan, Jan 15 '19 at 12:54

score 20 · Accepted Answer · answered Jan 15 '19 at 13:00

20

You can do something like:

function.js

const doSomething = function() {
let i = 0;
    if (this === that) {
        i = 0;
    } else {
       i = 1;
    }

}

export default doSomething;

App.js (for example):

import doSomething from "./function";

class Example extends Component {
    state = {
        test
    };
    render() {
        doSomething()
    return (
        <div>
            <h1>{this.state.test.sample[i].name}</h1>
        </div>
     )

answered Jan 15 '19 at 13:00

Tarreq

1,282
9
17

You are not assigning value of i to anything in your main component. for example you can return i from your function, and then after importing function into your file, you can do: let result = doSomething(); then you have the value of i, to assign it to whatever you want. – Tarreq Jan 15 '19 at 14:10
1

Thank you so much, holy crap, that makes so much sense! – user10916917 Jan 15 '19 at 14:38

Alwaysblue · Answer 2 · 2019-01-16T06:54:34.650

13

there are multiple ways to do it.

1st

If you are going to create multiple functions in that file

export const one = () => {
let i = 0;
    if (this === that) {
        i = 0;
    } else {
       i = 1;
    }
}

export const two = () => {
let i = 0;
    if (this === that) {
        i = 0;
    } else {
       i = 1;
    }
}

And then import and use it

import { 
one, 
two 
} from "./functions"

2nd

You can use export defualt

export default = function() {
  let i = 0;
  if (this === that) {
    i = 0;
  } else {
    i = 1;
  }
}

and then simply use it by doing this

import function from "./function";

edited Jan 16 '19 at 06:54

answered Jan 15 '19 at 13:01

Alwaysblue

9,948
38
121
210

this is a good answer, shows how to export multiple functions from a single file – Dobin Jun 30 '21 at 06:15
very useful example when tehre are more functions in external file. Thanks! – koubin Dec 19 '21 at 10:40

score 2 · Answer 3 · answered Jan 15 '19 at 12:59

The function keyword is a reserved identifier.

On the browser you need some kind of bundler tool which will allow to import from a js module. On the server you can just require(path/to/file). I suggest you look at create-react-app for a fully functionnal react setup. The basic setup contains example about the JS module system (see docs below).

In return your file needs to export the symbols you want to use.

In a directory with a.js and b.js where b wants to import a symbol from a

// file a.js
export function myFunction () {}


// file b.js
import { myFunction } from "./a";

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import https://github.com/facebook/create-react-app

score 1 · Answer 4 · edited May 03 '22 at 08:11

1

function.js has below code

const funcName = function() {
  let i = 0;
  if (this === that) {
    i = 0;
  } else {
    i = 1;
  }
}

export default funcName;

And you can use it in this.js as below -

import funcName from "./function"; // or wherever the file is saved

class Example extends Component {
    state = {
        test
    };
    render() {
        funcName();
      return (
        <div>
            <h1>{this.state.test.sample[i].name}</h1>
        </div>
       );
     }

edited May 03 '22 at 08:11

alien_jedi

306
3
11

answered Jan 15 '19 at 12:57

Rishikesh Dhokare

3,559
23
34

wrong error sorry, its actually showing "'i' is not defined" – user10916917 Jan 15 '19 at 13:13

Tobias · Answer 5 · 2019-01-15T13:46:26.773

1

Export your function like this in function.js

export function funcName() {
   //function stuff
   let i = 1;
   return i;
}

the import would be

import { funcName } from './function';

console.log(`value of i is ${funcName()}`);

edited Jan 15 '19 at 13:46

answered Jan 15 '19 at 12:58

Tobias

229
1
2
13

How would you import that? – Andy Jan 15 '19 at 13:05
@Andy import { funcName } from 'functions.js'; – Tobias Jan 15 '19 at 13:08
You should include that in your answer because the OP is trying to import with `import fn from './fn'` and might not understand the difference. – Andy Jan 15 '19 at 13:09
This is not working, I keep getting i is not defined – user10916917 Jan 15 '19 at 13:22
@user10916917 try the updated code. I had no idéa you actually wanted the variable from the function. – Tobias Jan 15 '19 at 13:47

score 0 · Answer 6 · answered Dec 16 '22 at 07:17

Try this

another-file.js

export function sum(a, b) {
  return a + b;
}

export function ShowText() {
  return '<h1>This is a sample Page</h1>';
}

App.js

import {sum, ShowText} from './another-file';

export default function App() {
  return (
    <div>
      <h2>5 + 5 = {sum(5, 5)}</h2>
      <hr />

      <h2>Text From another file: {ShowText()}</h2>
    </div>
  );
}

How can I use a function from another file in react?

6 Answers6

1st

2nd

Linked