clearInterval is not working in my function onclick

JavaScript
1

code source or check the link : https://codepen.io/freeCodeCamp/pen/XpKrrW?editors=0010

import { FontAwesomeIcon } from "https://cdn.skypack.dev/@fortawesome/react-fontawesome";
import { faPlay } from "https://cdn.skypack.dev/@fortawesome/free-solid-svg-icons@5.15.3";
import { faPause } from "https://cdn.skypack.dev/@fortawesome/free-solid-svg-icons@5.15.3";
import { faUndo } from "https://cdn.skypack.dev/@fortawesome/free-solid-svg-icons@5.15.3";

class Panel extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      sessionLength: 25,
      breakLength: 5,
      second: "00",
      pause: true
    }
    this.handleClickBreak = this.handleClickBreak.bind(this);
    this.handleClickSession = this.handleClickSession.bind(this);
    this.handleClickReset = this.handleClickReset.bind(this);
    this.handleClickPlayPause = this.handleClickPlayPause.bind(this);
  }
  
  handleClickBreak(e){
    const {breakLength} = this.state;
      if(e.target.innerText == "+"){
        this.setState({
          breakLength: breakLength + 1
        });
      }
      else{
        breakLength == 1
        ? this.setState({breakLength: breakLength})
        : this.setState({breakLength: breakLength - 1})
      }
  }
  
  handleClickSession(e){
    const {sessionLength} = this.state;
    if(e.target.innerText == "+"){
      this.setState({
        sessionLength: sessionLength + 1
      });
    }
    else{
      sessionLength == 1
      ? this.setState({sessionLength: sessionLength})
      : this.setState({sessionLength: sessionLength - 1})
    }
  }
  
  handleClickReset(){
    this.setState({
      sessionLength: 25,
      breakLength: 5,
      second: "00"
    })
  }
  
  handleClickPlayPause(){
    let {sessionLength, pause} = this.state;
    let interval ;
    this.setState({
      pause: !pause
    });
    
    interval = setInterval(()=>{
      if(pause){
        this.setState({
          sessionLength: sessionLength -= 1
        })
      }
      else{
        clearInterval(interval)
      }
    },1000)
    
    
    
    
  }
  render(){
    let {second, sessionLength, breakLength, pause} = this.state;
    
    return(
      <div id="container">
        <div id="container-panel">
          <div id="break-session">
            <div id="break">
              <p id="break-label">Break label</p>
              <div id="break-increment-decrement">
                <span id="break-decrement"
                  onClick={this.handleClickBreak}>
                  -
                </span>
                <span id="break-length">{breakLength}</span>
                <span id="break-increment"
                  onClick={this.handleClickBreak}>
                  +
                </span>
              </div>
            </div>
            <div id="session">
              <p id="session-label">Session label</p>
              <div id="session-increment-decrement">
                <span 
                  id="session-decrement"
                  onClick={this.handleClickSession}>
                  -
                </span>
                <span id="session-length">{sessionLength}</span>
                <span id="session-increment"
                  onClick={this.handleClickSession}>
                  +
                </span>
              </div>
            </div>
          </div>
        </div>
        <Screen
          sessionLength={sessionLength}
          second={second}
          reset={this.handleClickReset}
          playPause={this.handleClickPlayPause}
          pause={pause}
          />
      </div>
    )
  }
}

class Screen extends React.Component{
  constructor(props){
    super(props);
  }
  
  handleClickPlayPause(){
    alert("play");
  }
  
  render(){
    const {sessionLength, second} = this.props;
    console.log(this.props);
    return(
    <div id="container-screen">
        <p id="time-left"> <span className="time-left-minute">{sessionLength}</span>
          :<span className="time-left-second">{second}</span>
        </p>
        <p id="timer-label">session</p>
        <div id="icon">
          <div onClick={this.props.playPause}>
            <FontAwesomeIcon id={this.props.pause ? "start_stop" : "reset"} icon={this.props.pause ? faPlay : faPause}/>
          </div>
          <div onClick={this.props.reset}>
            <FontAwesomeIcon id="reset" icon={faUndo} />
          </div>
        </div>
    </div>
    )
  }
}


ReactDOM.render(<Panel />, document.querySelector("#root"));
2

  1. interval gets redeclared every time the function runs. You can save it to state, create it as a class field, or a top-level variable (outside the components).

  2. Call the check before the setInterval code.

if (!pause) {
  this.handleClickReset();
  clearInterval(this.interval);
}
Example 
// here I just used a class field (interval is declared at the top of the component before the constructor like so > interval;)
handleClickPlayPause() {
  let { sessionLength, pause } = this.state;
  
  this.setState({
    pause: !pause
  });

  if (!pause) {
    this.handleClickReset();
    clearInterval(this.interval);
  }

  this.interval = setInterval(() => {
    if (pause) {
      this.setState({
        sessionLength: (sessionLength -= 1)
      });
    }
  }, 1000);
}
3

thanks is working nice :grinning:

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.