how to import Helper class in react

Question

I am creating a helper class in react. The image below shows my setup:

In my App.js, I have:

import  Helpers  from './Helpers.js'

I have also tried:

 import  Helpers  from './components/Helpers.js'
 import  Helpers  from 'src/components/Helpers.js'
 import  Helpers  from './components/Helpers.js'
 import  Helpers  from 'src/components/Helpers.js'
 import  {Helpers}  from './components/Helpers.js'
 import  {Helpers}  from 'src/components/Helpers.js'

and I have also tried, in my Helpers.js:

export default Helpers
export default Helpers();

However, I receive an error message:

'./Helpers.js' does not contain an export named 'Helpers'.

It seems as though App.js can not find and locate this class. How can I import it, so i can just call the functions, like:

Helpers.helperFunctionHere();

thanks.

Answer 1

Option 1: Export each function individually

In Helpers.js

export function helperFunctionHere() {
    console.log("hello there");
}

In App.js

import {helperFunctionHere} from "./Helpers";

render() {
    helperFunctionHere();
}

Option 2: Static properties on the class

In Helpers.js

class Helpers {
    static helperFunctionHere() {
        console.log("hi");
    } 
}
export default Helpers

In App.js

import Helpers from "./Helpers";

render() {
    Helpers.helperFunctionHere();
}

Answer 2

Should be export default Helpers . Am also assuming that your bundler is setup correctly.