CODEWITHSUNDEEP
javascriptreactjsjsx
Samurai Jack
Samurai Jack

Reputation: 3135

Import a function from JS to JSX

I have a JS file containing this code:

module.exports = function loadMyFun() {

    function activateSite($currentItem) {
        ...
    }
  ...
}

And I want to import it into a JSX file, I tried to do it like this but I doesn't work:

import MyNav from './MyNav.js';

const top = MyNav.activateSite();

    componentDidMount () {
        var self = this;
        MyNav.activateSite($(self));
    }
...

I get this error:

Uncaught TypeError: _MyNav.default.activateSite is not a function

Any idea how to solve this?

Upvotes: 0

Views: 1173

Answers (2)

Joschua Schneider
Joschua Schneider

Reputation: 4093

If the code you provided is actually the module you are trying to load, then there are a few problems with that module.

You are exporting a constructor loadMyFun, which you are not calling/instantiating after importing it.

If you would instantiate your constructor like this const myNav = new MyNav() you would have a instance of your exported constructor.

To make your activateSite function work, you would have to assign it to the instance itself and move it out of the local scope of loadMyFunc by assigning it like this: this.activateSite = function(){...}

If you dont need any information wrapped around your activateSite function I would recommend you export an object with your functions instead of the loadMyFun approach.

//myModule.js
module.exports = {
    activateSite: function(){ ... }
}
//otherFile.js
import { activateSite } from './myModule.js' // With destructuring
activateSite()

import myModule from './myModule.js' // Without destructuring
myModule.activateSite()

Upvotes: 3

Quentin
Quentin

Reputation: 944441

activateSite is a variable that is locally scoped to the loadMyFun function.

It is not available outside the scope of loadMyFun.

It is not a property of the loadMyFun function object.

You cannot access it without rewriting the module.

e.g.

module.exports = function loadMyFun() {
};

module.exports.activeSite = function activateSite($currentItem) {
};

Upvotes: 4

Related Questions