Call react this.function inside jquery

Question

I have a Jquery function on my componentWillMount at reactJS:

$(document).ready(function(e) {
 this.myFunction();
}

And a arrow function declared down bellow:

myFunction = () => {
 alert("Jquery is ready!");
}

Why im getting this.myFunction() is not a function error?

Because `this` doesn’t refer to the react component. Not quite sure if jQuey sets it for `ready`. It’s either `document` or `window`. — Felix Kling, Jan 19 '20 at 17:37
May you post the code which accurately demonstrates the issue your facing? — evolutionxbox, Jan 19 '20 at 17:38
If `this` outside that function references the component you can use an arrow function instead — Felix Kling, Jan 19 '20 at 17:39
You don't need jQuery .... run your function in `componentDidMount ` — charlietfl, Jan 19 '20 at 17:44
Yeah, there shouldn’t be a reason to use jQuery at all here. — Felix Kling, Jan 19 '20 at 17:50

score 0 · Accepted Answer · edited Dec 08 '20 at 18:00

0

You are calling this inside another function which it is not bound to your object and therefore changes the scope of this.

You can try

a) Make the Function an arrow function:

$(document).ready(() => this.myFunction());

b) Bind the outside this into the anonymous function

$(document).ready(function(e) {
 this.myFunction();
}.bind(this));

c) Create a variable holding this

var self = this;
$(document).ready(function(e) {
 self.myFunction();
});

edited Dec 08 '20 at 18:00

halfer

answered Jan 19 '20 at 17:39

marks

FWIW, it’s irrelevant that the function is anonymous. The same would happen with a named function. – Felix Kling Jan 19 '20 at 17:41
You're absolutely right of course! – marks Jan 19 '20 at 17:45

1 Answers1