title: When I hit the spacebar to stop the stopwatch it restarts at 0 and begins to speed up
body: <p>Here is my program. I created the stopwatch with a start and stop button and everything worked as it should. My next step was to make the stopwatch react to the keyboard, via the spacebar. When I hit the start button, the stopwatch starts running. When I hit the spacebar, instead of the stopwatch just stopping at its current place, it restarts at 0 and begins to count up really quickly. The stop button works as it should.</p>
  <pre><code>import React from 'react';
  
  class Home extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {milliSecondsElapsed: 0};
  
          this.handleStopClick = this.handleStopClick.bind(this);
          this.keyPress = this.keyPress.bind(this);
          
      }
  
      keyPress = (e) =&gt; {
          if (e.keyCode == 32){
              handleStopClick();
  
          }
      }
  
      getMilliseconds() {
          return (&quot;0&quot; + this.state.milliSecondsElapsed).slice(-2);
      }
      // var number = this.state.milliSecondsElapsed.toString().length;
      getSeconds() {
          var milli = this.state.milliSecondsElapsed;
          var seconds = 0;
          seconds = milli / 100;
  
          var myTrunc = Math.trunc(seconds);
  
          myTrunc = myTrunc % 60;
  
          return (&quot;0&quot; + myTrunc).slice(-2);
      }
  
      getMinutes() {
          var milli = this.state.milliSecondsElapsed;
          var seconds = 0;
          var minutes = 0;
          seconds = milli / 100;
          minutes = seconds / 60;
  
          var myTrunc = Math.trunc(minutes);
  
          return (&quot;0&quot; + myTrunc).slice(-2);
          
      }
  
      handleStartClick = () =&gt; {
          this.setState({
              milliSecondsElapsed: (0)
          });
          this.timer = setInterval(() =&gt; {
              this.setState({
                  milliSecondsElapsed: (this.state.milliSecondsElapsed + 1)
              });
          }, 10)
      }
  
      handleStopClick = () =&gt; {
          clearInterval(this.timer);
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;h1&gt;{this.getMinutes()}:{this.getSeconds()}.{this.getMilliseconds()}&lt;/h1&gt;
                  &lt;button type=&quot;button&quot; onClick={this.handleStartClick}&gt; start &lt;/button&gt;
                  &lt;button type=&quot;button&quot; onClick={this.handleStopClick}&gt; stop &lt;/button&gt;
                  &lt;input value={this.state.milliSecondsElapsed} onKeyDown={this.keyPress} onChange={this.handleStopClick}/&gt;
              &lt;/div&gt;
          );
      }
  
  }
  
  export default Home;
  </code></pre>
  <p>Does anyone see what could be causing this?</p>