title: setTimeout and clearTimeout in reactJS
body: <p>I am trying to create a greeting UI that fades out before displaying main content.The desired effect can be found <a href="http://help.apple.com/macOS/high-sierra/macbook-pro-13/?lang=en&amp;cases=kIFAGHvXTAepRptQXiXe5w,N0bfKOvERSiAp06mHOcgOQ#outro" rel="nofollow noreferrer">HERE</a></p>
  
  <p>When a certain scroll input, say 100px from the top, is reached</p>
  
  <ol>
  <li>Greeting appears for 5seconds and fades out </li>
  <li>Main content waits until greeting fades out and gets displayed.</li>
  </ol>
  
  <p>I achieved this effect with setTimeout but I now want to know how to set clearTimeout properly.</p>
  
  <p>Here is my code</p>
  
  <pre><code>componentDidMount() {
      window.addEventListener(
        "wheel",
        () =&gt; requestAnimationFrame(this.handleScroll.bind(this)),
        false
      );
    }
  
  handleScroll(e){  
      const scrolltop = window.scrollY; 
      scrolltop &gt; 120 ? this.showGreeting().bind(this):null
    }
  
  showGreeting(){
      this.setState({
        greetingDisplay:true,
      })
      const timer = setTimeout(this.showContent.bind(this),5000);
    } 
  
  showContent(){
  
      this.setState({
        greetingDisplay:false,
        contentDisplay:1,
     })
    //How do I clear the timer here? 
  }
  </code></pre>
  
  <ul>
  <li><a href="https://codepen.io/semosem/pen/PQgoqJ?editors=0011" rel="nofollow noreferrer">Here</a> is my attempt, Codepen </li>
  </ul>