Call method within method in reactjs

Question

I want to call a method inside another method like this, but it is never called.

Button:

<span onClick={this.firstMethod()}>Click me</span>

Component:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {..};
  }

  firstMethod = () => (event) => {
    console.log("button clicked")
    this.secondMethod();
  }

  secondMethod = () => (event) => {
    console.log("this is never called!")
  }

  render() {..}
}

The first method is called, but not the second one. I tried to add to the constructor

this.secondMethod = this.secondMethod.bind(this);

which is recommended in all the other solutions but nothing seems to work for me. How can I call the second method correctly?

Answer 1

There are two problems here.

First one: You are defining your functions wrong.

firstMethod = () => (event) => {
    console.log("button clicked")
    this.secondMethod();
}

Like this, you are returning another function from your function. So, it should be:

firstMethod = ( event ) => {
    console.log("button clicked")
    this.secondMethod();
}

Second: You are not using onClick handler, instead invoking the function immediately.

<span onClick={this.firstMethod()}>Click me</span>

So, this should be:

<span onClick={() => this.firstMethod()}>Click me</span>

If you use the first version, yours, when component renders first time your function runs immediately, but click does not work. onClick needs a handler.

Here, I totally agree @Danko's comment. You should use this onClick with the function reference.

<span onClick={this.firstMethod}>Click me</span>

With this method, your function is not recreated every time your component renders since it uses your handler function with its reference. Also, no struggle writing the handler manually.

Lastly, if you define your functions as an arrow one, you don't need to .bind them.

Here is the working code.

class App extends React.Component {

  firstMethod = () => {
    console.log("button clicked")
    this.secondMethod();
  }

  secondMethod = () =>
    console.log("this is never called!")

  // or maybe even better not using an arrow function for the
  // second method since it is already bound to `this` since we
  // invoke it from the firstMethod. For details, look the comments please.

  /* secondMethod() {
    console.log("this is never called!")
  } */
 

  render() {
    return(
      <span onClick={this.firstMethod}>Click me</span>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

Instead of firstMethod = () => (event) try firstMethod = (event) => and instead of secondMethod = () => (event) => { try secondMethod = (event) => {

Answer 3

Your second method returns a new function, which is redundant.
Also, your second method can be not bound, since the first method has the context already.

secondMethod = () => (event) => { ... } should be secondMethod(evnt) { ... }

Here is the working and optimized example https://codesandbox.io/s/pkl90rqmyj

Answer 4

The bad news is that you can't bind arrow functions because they're lexically bound. See:

Can you bind arrow functions?

The good news is that "lexical binding" means that they should already have App as their this, i.e. it should would without explicitly binding. You'd likely redefining them as undefined, or some other odd thing by treating them this way in the constructor.

Answer 5

Try this, it works for me.

  firstMethod = () => {
    console.log("click handler for button is provided")
    return (event) => this.secondMethod(event);
  }

  secondMethod = (event) => {
    console.log("This is being called with", event);
  }

Answer 6

Can you check this way using this url: https://codesandbox.io/s/q4l643womw I think you're using wrong bind methods but here you can see an example

class App extends Component {
  constructor() {
     super();
     this.state = {
       num: 1,
     };
     this.firstMethod = this.firstMethod.bind(this);
     this.secondMethod = this.secondMethod.bind(this);
  }

  firstMethod() {
    this.secondMethod();
  }

  secondMethod() {
    this.setState({
      num: 2
    });
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.firstMethod}>click</button>
        <label>{this.state.num}</label>
      </div>
    );
  }
}