React: How do I run a custom function inside another custom function

Question

I want to reuse some code in a react component via a custom function. However, when I run the following code, I get an error: this.runBubbles() is undefined.

class HomePage extends React.Component {

  runBubbles(){
    // instantiate some css bubbles on screen
  }

  clearAndRunBubbles(){
    // clear bubbles from DOM
    this.runBubbles()
  }

  componentDidMount(){
    this.runBubbles()
    // on resize, re-run bubbles code with new screen dimensions:
    window.addEventListener("resize",this.clearAndRunBubbles);
  }
}

meant to put that in the first place, still throws an error. Which makes no sense since it's already been called in componentDidMount{} — dooblr
– dooblr, Commented Aug 3, 2019 at 19:04
Make sure you bind the functions with this keyword or else use arrow functions to avoid this binding. — Sathishkumar
– Sathishkumar, Commented Aug 3, 2019 at 19:05
Check componentDidMount, change runBubbles() to this.runBubbles() — Ramaraja
– Ramaraja, Commented Aug 3, 2019 at 19:06
making both runBubbles and clearAndRunBubbles arrow functions got it to work. — dooblr
– dooblr, Commented Aug 3, 2019 at 19:07

Sathishkumar · Accepted Answer · 2019-08-03 19:14:47Z

1

Try like this

class HomePage extends React.Component {

  runBubbles = () => {
    // instantiate some css bubbles on screen
  }

  clearAndRunBubbles = () =>  {
    // clear bubbles from DOM
    this.runBubbles()
  }

  componentDidMount(){
    this.runBubbles()
    // on resize, re-run bubbles code with new screen dimensions:
    window.addEventListener("resize", this.clearAndRunBubbles);
  }
}

For arrow function you don't need to have the this binding because by default it takes outer lexical scope.

or

class HomePage extends React.Component {

 constructor() {
   this.runBubbles = this.runBubbles.bind(this);
   this.clearAndRunBubbles = this. clearAndRunBubbles.bind(this);
 }

runBubbles(){
    // instantiate some css bubbles on screen
  }

  clearAndRunBubbles(){
    // clear bubbles from DOM
    this.runBubbles()
  }

  componentDidMount(){
    this.runBubbles()
    // on resize, re-run bubbles code with new screen dimensions:
    window.addEventListener("resize",this.clearAndRunBubbles);
  }
}

Whenever calling a standard function inside a class component in react you have to add this binding to make sure the function is binds to current class component.

edited Aug 3, 2019 at 19:14

answered Aug 3, 2019 at 19:07

Sathishkumar

3,7932 gold badges36 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dooblr Over a year ago

runBubbles = () => {} and clearAndRunBubbles = () => {} worked

José Neto · Accepted Answer · 2019-08-03 19:08:12Z

0

On componentDidMount method, change runBubbles() to this.runBubbles()

answered Aug 3, 2019 at 19:08

José Neto

5068 silver badges12 bronze badges

Collectives™ on Stack Overflow

React: How do I run a custom function inside another custom function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related