title: How to stop setTimeout onClick in Reactjs
body: <p>I am new to <code>Reactjs</code> and while using <code>setTimeOut</code> I got stuck on what is the best way to stop it.Should I use <code>clearTimeOut</code> or <code>stopPropagation()</code>.</p>
  
  <p>This is my code</p>
  
  <pre><code>render: function() {
      return ( &lt; div className = "colorClick"
        style = {
          {
            background: this.state.bgColor
          }
        }
        onClick = {
          this.detectColor
        } &gt; &lt; /div&gt;&lt;br/ &gt;
      );
    },
    calcTime: function() {
      var time = Math.floor((Math.random() * 9) + 1);
      this.setState({
        total_time: time
      }, () =&gt; {
        window.setTimeout(this.calcTime, 250)
      });
    },
  
  
    detectColor: function(event) {
      window.clearTimeout(this.state.total_time);
      window.clearTimeout(this.calcTime);
    },
  
  
    componentDidMount: function() {
      this.calcTime();
    },
    componentWillUnmount: function() {
      this.detectColor();
    }
  </code></pre>
  
  <p>In this code I am using <code>clearTimeOut</code> but it is not working.I want that when I click on <code>div</code> with <code>className="colorClick"</code>, the setimeOut should clear and reset.</p>