title: Creating a timer in react
body: <p>Forgive me if this seems overly simple...this is the first thing I have ever made in React so I'm just trying to wrap my head around things.  I'm already realizing I should have smaller component like buttons and render them with props and all that (goal is to refactor later!) but currently I am having a hard time figuring out how to use the setInterval method to change the state, and then stop that.</p>
  
  <p>I'm building a pomodoro timer, and the general idea is that my state is maintaining the total seconds that the timer should have left. I have another function that will convert the total seconds into a time format I want to display.</p>
  
  <p>My struggle is within my startStop() method, I would like the change the state of the running (the timer is running) to t/f and that will work, but I am clearly doing something wring with the setInterval.  I want to set an interval (when there is time remaining) to change the state every second to be 1 second less.  When I click the button again, the interval timer would stop and the current "state" of seconds remaining would be the same, so if you clicked the button again it would just start the timer again.</p>
  
  <p>Thanks for the help! (This is all getting rendered from the create-react-app so there is more at my github is needed: <a href="https://github.com/ryanmdoyle/web-pomodoro" rel="nofollow noreferrer">https://github.com/ryanmdoyle/web-pomodoro</a>)</p>
  
  <pre><code>    import React, { Component } from "react ";
  
      class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        sessionTimeEntry: 25, //in min
        breakTimeEntry: 5, //in min
        sessionRemainingSeconds: 1500, //in seconds
        breakRemainingSeconds: 300, //in seconds
        running: false,
        timerLabel: "Session"
      }
      this.addSession = this.addSession.bind(this);
      this.subSession = this.subSession.bind(this);
      this.addBreak = this.addBreak.bind(this);
      this.subBreak = this.subBreak.bind(this);
      this.startStop = this.startStop.bind(this);
      this.resetTimer = this.resetTimer.bind(this);
      this.formatMinutes = this.formatMinutes.bind(this);
    }
  
    addSession() { //adding and subtracting methods need to also chage the session remaining in seconds to mirrow the entry time if ever changed
      this.setState({
        sessionTimeEntry: this.state.sessionTimeEntry + 1,
        sessionRemainingSeconds: this.state.sessionRemainingSeconds + 60
      })
    }
  
    subSession() {
      this.setState({
        sessionTimeEntry: this.state.sessionTimeEntry - 1,
        sessionRemainingSeconds: this.state.sessionRemainingSeconds - 60
  
      })
    }
  
    addBreak() {
      this.setState({
        breakTimeEntry: this.state.breakTimeEntry + 1,
        breakRemainingSeconds: this.state.breakRemainingSeconds + 60
      })
    }
  
    subBreak() {
      this.setState({
        breakTimeEntry: this.state.breakTimeEntry - 1,
        breakRemainingSeconds: this.state.breakRemainingSeconds - 60
      })
    }
  
    startStop() {
  
      let timer;
      const status = this.state.running;
  
      switch (status) {
        case false:
          console.log("should start!")
          this.setState({
            running: true
          })
  
          while (this.state.breakRemainingSeconds &gt; 0) {
            timer = setInterval(() =&gt; {
              this.setState({
                breakRemainingSeconds: this.state.breakRemainingSeconds - 1
              });
              console.log(this.state.breakRemainingSeconds);
            }, 1000)
          }
  
          break;
        case true:
          console.log("should stop")
          this.setState({
            running: false
          })
          clearInterval(timer)
          break;
        default:
          break;
      }
  
    }
  
    resetTimer() {
      this.setState({
        sessionTimeEntry: 25,
        breakTimeEntry: 5,
        sessionRemainingSeconds: 1500,
        breakRemainingSeconds: 300,
        running: false,
        timerLabel: "Session"
      })
    }
  
    formatMinutes(time) {
      let seconds = time;
      const minutes = (seconds % 60 === 0) ? ((seconds / 60) &lt; 10 ? "0" + seconds / 60 : seconds / 60) : (Math.floor(seconds / 60) &lt; 10 ? "0" + Math.floor(seconds / 60) : Math.floor(seconds / 60));
      seconds = (seconds % 60 === 0) ? "00" : ((seconds % 60 &lt; 10) ? "0" + (seconds % 60) : seconds % 60)
      console.log(minutes + ":" + seconds);
      return minutes + ":" + seconds;
    }
  
    render() {
      return ( &lt;
        div &gt;
        &lt;
        h1 &gt; Pomodoro Clock &lt; /h1&gt; &lt;
        h2 &gt; {
          this.state.sessionTimeEntry
        } &lt; /h2&gt; &lt;
        div id = 'timerContainer' &gt;
        &lt;
        h3 id = "session-label" &gt; Session Time &lt; /h3&gt; &lt;
        h3 id = "session-length" &gt; {
          this.formatMinutes(this.state.sessionRemainingSeconds)
        } &lt; /h3&gt; &lt;
        button onClick = {
          this.addSession
        }
        id = "session-increment" &gt; ^ &lt; /button&gt; &lt;
        button onClick = {
          this.subSession
        }
        id = "session-decrement" &gt; v &lt; /button&gt; &lt;
        /div&gt; &lt;
        div id = 'timerContainer' &gt;
        &lt;
        h3 id = "break-label" &gt; Break Time &lt; /h3&gt; &lt;
        h3 id = "break-length" &gt; {
          this.state.breakTimeEntry
        } &lt; /h3&gt; &lt;
        button onClick = {
          this.addBreak
        }
        id = "break-increment" &gt; ^ &lt; /button&gt; &lt;
        button onClick = {
          this.subBreak
        }
        id = "break-decrement" &gt; v &lt; /button&gt; &lt;
        /div&gt; &lt;
        div &gt;
        &lt;
        button onClick = {
          this.startStop
        }
        id = "start-stop" &gt; Start / Stop &lt; /button&gt; &lt;
        button onClick = {
          this.resetTimer
        }
        id = "reset" &gt; Reset &lt; /button&gt; &lt;
        /div&gt; &lt;
        /div&gt;
      )
    }
  
  }
  
  export default App;
  </code></pre>
  
  <p>**************** UPDATE *****************</p>
  
  <p>Figured it all out!  Here is a link to the working codepen to see it in action. </p>
  
  <p><a href="https://codepen.io/ryanmdoyle/pen/vaxoaG" rel="nofollow noreferrer">https://codepen.io/ryanmdoyle/pen/vaxoaG</a></p>