title: A click to start the countdown timer and a second one to Pause the timer in the same button
body: <p>I want to click on (Start/Pause) Button in order start the coundown in the first click and the second click to pause it.It should be two options in the same button to start and pause the timer.</p>
  
  <p>Here a descriptive image :</p>
  
  <p><a href="https://i.stack.imgur.com/fuyEJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fuyEJ.png" alt="enter image description here"></a></p>
  
  <p>A created a separated button for start and pause the countdown but i want to make them in the same button.</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: 1800000 / 1000 //time in seconds
      };
    }
  
    getHours() {
      return ("0" + Math.floor(this.state.secondsElapsed / 3600)).slice(-2);
    }
  
    getMinutes() {
      return ("0" + Math.floor((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;div className="timer-container"&gt;
            &lt;div className="bloc-timer"&gt; {this.getHours()}&lt;/div&gt;
            &lt;div className="bloc-timer"&gt; :{this.getMinutes()}&lt;/div&gt;
            &lt;div className="bloc-timer"&gt; :{this.getSeconds()}&lt;/div&gt;
          &lt;/div&gt;
          &lt;div&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;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>