setState causes unexpected trigger of event handler method

Question

I am using a click event handler that calls setState. but it seems that setState causes a continous unexpected trigger of click event handler.

the state is composed of object (containing minutes and seconds) that should be decreased when i click the html element.

    const sessionLength = {min: 25,
      sec: 0}
    this.state = {
      breakLength: 5,
      sessionLength: sessionLength,
      sessionProcessed: sessionLength
    }

this is the click Event handler:

  startPomodoro(){
    this.setState(prevState=>({sessionProcessed: {...prevState.sessionProcessed, sec: prevState.sessionProcessed.sec - 1}}));
  };

and the JSX :

  render(){
    return(
      <div class="ml-5">
        <h1>Test</h1>
        <div>Session</div>
        <div><strong id="session">{this.state.sessionLength.min}:{this.state.sessionLength.sec}</strong></div>
        <div><i id="play" class="fa fa-play" onClick={this.startPomodoro()}></i> <i id="pause" class="fa fa-pause" onClick={this.pausePomodoro()}></i></div>
      </div>
    )
  }

As it display nothing, i have added an alert statement in the click event handler (startPomodoro) and it executes the startPomodoro event handler without me clicking.

Answer 1

You are calling the handler (startPomodoro()) instead of just passing it (startPomodoro). Change your code to:

<i id="play" class="fa fa-play" onClick={this.startPomodoro}></i> <i id="pause" class="fa fa-pause" onClick={this.pausePomodoro}></i>