title: componentWillUnmount & Warning: setState(...): error
body: <p>I'm having an issue when I use a navigate away from this component in react I get this error: warning.js:36 Warning: setState(...): "Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the ProjectsHeader component."</p>
  
  <p>Now I've looked over the docs for componentWillUnmount which states "Invoked immediately before a component is unmounted from the DOM.</p>
  
  <p>Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any DOM elements that were created in componentDidMount."</p>
  
  <p>The problem is that I don't know how to do that. I've looked at the other Stack overflow examples and I don't understand them and can't figure it out. There doesn't seem to be a good enough example for me to understand how to do it. I understand the lifecycle I just don't know how to execute it. </p>
  
  <p>Here is my code: </p>
  
  <pre><code>import React from 'react';
  import jQuery from 'jquery';
  import $ from 'jquery';
  
  import ProjectsHeaderLinks from "./ProjectsHeaderLinks.jsx";
  
  export default class ProjectsHeader extends React.Component {
  
      constructor() {
          super()
          this.state = {
              class: "not-sticky-div",
              class2: "hidden-span",
              class3: "false"
          }
      }
  
  
  
      componentDidMount() {
          this.scrollTop();
  
      }
  
      componentWillUnmount(){
          this.scrollTop = null;
          console.log("unmounted");
      }
  
  
      scrollTop(){
          var that = this;
          let head = $(".header");
          let stick = "sticky";
          let projHead = document.getElementById("projHead");
      $(window).scroll(function() {
          $(window).scrollTop() &gt; 400
              ? head.addClass(stick)
              : head.removeClass(stick);
          let newValue = projHead.classList.value.split(' ', 2);
          for (var i = 0; i &lt; newValue.length; i++) {
              newValue[i] === "sticky"
                  ? that.setState({class: "sticky-div", class2: "visible-span", class3: "true"})
                  : that.setState({class: "not-sticky-div", class2: "hidden-span", class3: "true"});
              }
          })
      }
  
  
  
      render() {
          return (
              &lt;div id="projHead" className="header"&gt;
                  &lt;div className={this.state.class}&gt;
                  {this.state.class === "not-sticky-div"
                   ? &lt;div&gt;"This is My Projects Page" --Lonnie McGill&lt;/div&gt;
                   : &lt;div&gt; &lt;ProjectsHeaderLinks/&gt; &lt;/div&gt;
              }
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>