title: Countdown timer using React Hooks
body: <p>So the timer works. If I hard code <code>this.state</code> with a specific countdown number, the timer begins counting down once the page loads. I want the clock to start counting down on a button click and have a function which changes the <code>null</code> of the <code>state</code> to a randomly generated number. I am a bit new to React. I am know that <code>useState()</code> only sets the initial value but if I am using a click event, how do I reset <code>useState()</code>? I have been trying to use <code>setCountdown(ranNum)</code> but it crashes my app. I am sure the answer is obvious but I am just not finding it.</p>
  
  <p>If I didnt provide enough code, please let me know. I didn't want to post the whole shebang.</p>
  
  <p>here is my code:</p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  
  export const Timer = ({ranNum, timerComplete}) =&gt; {
      const [ countDown, setCountdown ] = useState(ranNum)
      useEffect(() =&gt; {
          setTimeout(() =&gt; {
              countDown - 1 &lt; 0 ? timerComplete() : setCountdown(countDown - 1)
          }, 1000)
      }, [countDown, timerComplete])
      return ( &lt;p &gt;Countdown: &lt;span&gt;{ countDown }&lt;/span&gt; &lt;/p&gt; )
  }
  
  
  </code></pre>
  
  <pre><code>  handleClick(){
      let newRanNum = Math.floor(Math.random() * 20);
      this.generateStateInputs(newRanNum)
      let current = this.state.currentImg;
      let next = ++current % images.length;
      this.setState({
        currentImg: next,
        ranNum: newRanNum
      })
    }
  
   &lt;Timer ranNum={this.state.ranNum} timerComplete={() =&gt; this.handleComplete()} /&gt;
   &lt;Button onClick={this.handleClick}  name='Generate Inputs' /&gt;
   &lt;DisplayCount name='Word Count: ' count={this.state.ranNum} /&gt;
  
  </code></pre>