title: Change the state when clicking outside a component in React
body: <p>I have a dropdown as is shown in the following image:
  <a href="https://i.stack.imgur.com/JnwZc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JnwZc.png" alt="enter image description here"></a></p>
  
  <p>When I click the folder icon it opens and closes because <code>showingProjectSelector</code> property in the state that is set to false.</p>
  
  <pre><code>  constructor (props) {
      super(props)
      const { organization, owner, ownerAvatar } = props
      this.state = {
        owner,
        ownerAvatar,
        showingProjectSelector: false
      }
    }
  </code></pre>
  
  <p>When I click the icon, it opens and closes properly. </p>
  
  <pre><code>&lt;i
    onClick={() =&gt; this.setState({ showingProjectSelector: !this.state.showingProjectSelector })}
    className='fa fa-folder-open'&gt;
  &lt;/i&gt;
  </code></pre>
  
  <p>But what I'm trying to do is to close the dropdown when I click outside it. How can I do this without using any library?</p>
  
  <p>This is the entire component: <a href="https://jsbin.com/cunakejufa/edit?js,output" rel="noreferrer">https://jsbin.com/cunakejufa/edit?js,output</a></p>