title: React 16: Error: Unable to find node on an unmounted component
body: <p>I recently upgraded my project from React v15.2.1 to 16.4.1 and my Sidebar component is throwing the following error:</p>
  
  <pre><code>Error: Unable to find node on an unmounted component. bundle.js line 1326 &gt; eval:42:15
  invariant
  webpack:///./node_modules/fbjs/lib/invariant.js?:42:15
  findCurrentFiberUsingSlowPath
  webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:3817:7
  findCurrentHostFiber
  webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:3886:23
  findHostInstance
  webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:16824:19
  findDOMNode
  webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:17310:12
  handleClickOutside
  webpack:///./src/components/simulator/sidebar/Sidebar.js?:99:31
  handleClickOutside self-hosted:984:17
  </code></pre>
  
  <p>Based on the error message, I believe the error is happening when calling ReactDOM.findDOMNode(this) in the handleClickOutside(event) method.</p>
  
  <p>The component that I am using can be found here: <a href="https://ashiknesin.com/blog/build-custom-sidebar-component-react/" rel="noreferrer">https://ashiknesin.com/blog/build-custom-sidebar-component-react/</a>,
  I have changed it a little bit to this:</p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import classNames from 'classnames'
  import SimulatorForm from './SimulatorForm'
  import './Sidebar.scss'
  
  const  openForm = require('../../../public/icons/si-glyph-arrow-left.svg');
  const closeForm = require('../../../public/icons/si-glyph-arrow-right.svg');
  const   pinForm = require('../../../public/icons/si-glyph-pin-location-love.svg');
  const unpinForm = require('../../../public/icons/si-glyph-pin-location-delete.svg');
  
  class Sidebar extends React.Component {
      constructor(props) {
          super(props)
          this.state = {
              showMenu: false,
              isMenuPinned: false,
              formIcon: openForm,
              pinIcon: pinForm,
              modelsDescription: props.modelsDescription
          }
          // Methods to pin/unpin the Form
          this.toggleMenu = this.toggleMenu.bind(this)
          this.pinMenu = this.pinMenu.bind(this)
          // Handlers
          this.handleSelectedModelChange = this.props.handleSelectedModelChange
          this.handleNewMasterGraphsData = this.props.handleNewMasterGraphsData
          this.handleNewResults = this.props.handleNewResults
      }
      componentWillReceiveProps(nextProps) {
          this.setState({ modelsDescription: nextProps.modelsDescription});
      }
      componentDidMount() {
          document.addEventListener('click', this.handleClickOutside.bind(this), true);
      }
  
      componentWillUnmount() {
          document.removeEventListener('click', this.handleClickOutside.bind(this), true);
      }
      pinMenu() {
          this.setState({
              isMenuPinned: !this.state.isMenuPinned,
              pinIcon: this.state.isMenuPinned ? pinForm : unpinForm
          });
      }
      toggleMenu() {
          this.setState({
              showMenu: !this.state.showMenu,
              formIcon: this.state.showMenu ? openForm : closeForm
          });
      }
      handleClickOutside(event) {
          if (!this.state.isMenuPinned) {
              const domNode = ReactDOM.findDOMNode(this);
  
              if ((!domNode || !domNode.contains(event.target))) {
                  this.setState({
                      showMenu: false,
                      formIcon: openForm
                  });
              }
          }
      }
  
      render() {
          const showMenu = this.state.showMenu;
          const sidebarClass = classNames({
              'sidebar': true,
              'sidebar-menu-expanded': showMenu,
              'sidebar-menu-collapsed': !showMenu
          });
  
          const elementsClass = classNames({
              'expanded-element': true,
              'is-hidden': !showMenu,
          });
  
          return (
              &lt;nav className={sidebarClass}&gt;
                  &lt;img className="menuIcon" src={this.state.formIcon} height="42" width="42" onClick={this.toggleMenu} /&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          {
                              this.state.showMenu ? &lt;img className="pinIcon" src={this.state.pinIcon}  height="42" width="42" onClick={this.pinMenu} /&gt; : null
                          }
                      &lt;/li&gt;
                      &lt;li&gt;
                          {
                              this.state.showMenu ?  &lt;SimulatorForm modelsDescription={this.state.modelsDescription} handleSelectedModelChange={this.handleSelectedModelChange}
                                                      handleNewMasterGraphsData={this.handleNewMasterGraphsData} handleNewResults={this.handleNewResults} /&gt; : null
                          }        
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          )
      }
  }
  
  
  export default Sidebar
  </code></pre>
  
  <p>Lastly, the error is only thrown when I reload the page. If I don't, it seems to be working perfectly fine. Do you have any suggestions or recommendations to make sure the error is not thrown again?</p>
  
  <p>I have been reading about this on-line and I couldn't find a fix for it. Also, I dont't think this is listed as a breaking change but I could be very wrong.</p>