title: CountDown Timer with start/Pause and reset button
body: <p>i want to create a countDown timer in React JS with the "start","Pause" and "Reset" Button in order to Manipulate the timer. As a beginner developper in React and JS, i create a state variable "secondsElapsed" in order to enter the time in seconds for the timer.</p>
  
  <p>The "startTime" function is to start the countdown for the timer in each second.
  The "resetTime" function is to reset the "secondsElapsed" to 0.
  The "pauseTime" function is to pause the timer.</p>
  
  <p>The other functions are to calculate the time and returned it in specific field.</p>
  
  <p>Here the description image</p>
  
  <p><a href="https://i.stack.imgur.com/byxFo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/byxFo.png" alt="Discriptive Timer "></a></p>
  
  <p>The countdown is functionnal after clicking on the "Start Button " and seconds  are decreasing. The problem is that the minutes and hours fields are not decreasing as supposed to be each minute and each hour.</p>
  
  <p>Here my codesandbox link: <a href="https://codesandbox.io/s/y3l1ymq6r1" rel="nofollow noreferrer">https://codesandbox.io/s/y3l1ymq6r1</a></p>
  
  <p>Here my React Js code:</p>
  
  <pre><code>import React from "react";
  
  export default class Timer extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        secondsElapsed: 122 //time in seconds
      };
    }
  
    getHours() {
      return ("0" + Math.round(this.state.secondsElapsed / 3600)).slice(-2);
    }
  
    getMinutes() {
      return ("0" + Math.round((this.state.secondsElapsed % 3600) / 60)).slice(
        -2
      );
    }
  
    getSeconds() {
      return ("0" + (this.state.secondsElapsed % 60)).slice(-2);
    }
  
    startTime() {
      var _this = this;
      this.countdown = setInterval(function() {
        _this.setState({ secondsElapsed: _this.state.secondsElapsed - 1 });
      }, 1000);
    }
  
    resetTime() {
      this.reset = this.setState({
        secondsElapsed: (this.state.secondsElapsed = 0)
      });
    }
  
    pauseTime() {
      clearInterval(this.countdown);
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;h1&gt;
            {this.getHours()}:{this.getMinutes()}:{this.getSeconds()}
          &lt;/h1&gt;
          &lt;button onClick={() =&gt; this.startTime()}&gt;Start&lt;/button&gt;
          &lt;button onClick={() =&gt; this.pauseTime()}&gt;Pause&lt;/button&gt;
          &lt;button onClick={() =&gt; this.resetTime()}&gt;Reset&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>