title: Reactjs - Toggle dropdown menu on click outside anywhere on page instead of just click on the icon
body: <p>I have a React js App (No JQuery please) drop down menu that I trigger when the ▼ character is clicked. With my code below, the dropdown menu disappears only when the same ▼ is clicked again. I want to make it disappear when the user clicks anywhere else on the page. How to change the code below to make the dropdown menu disappear when the user clicks anywhere else on the page as well and not just by clicking the same icon ▼ ?</p>
  
  <p><strong>Toggler Icon:</strong></p>
  
  <pre><code>      &lt;span className="show_more" onClick={this.toggleOptions}&gt;
          &lt;MaterialIcon icon="keyboard_arrow_down" /&gt;
        &lt;/span&gt;
  </code></pre>
  
  <p><strong>Code for toggling:</strong> (used by many components so can the fix be only here ?)</p>
  
  <pre><code>import React, { Component } from 'react'
  ...
  import MaterialIcon from '../icons/material-icon'
  import HeaderLogo from './logo'
  
  export default class Header extends Component {
    state = {
      showOptions: false,
    }
  
    toggleOptions = () =&gt; this.setState({ showOptions: !this.state.showOptions })
  
    render() {
      let { showOptions } = this.state
  
      return (
        &lt;div className="header"&gt;
          &lt;div className="row-container container"&gt;
            &lt;div className="col-l"&gt;
              &lt;HeaderLogo /&gt;
            &lt;/div&gt;
            &lt;div className="col-m"&gt;
              &lt;Search /&gt;
            &lt;/div&gt;
            &lt;div className="col-r"&gt;
              &lt;div className="header_right"&gt;
                &lt;HeaderTopLinks /&gt;
                &lt;span className="show_more" onClick={this.toggleOptions}&gt;
                  &lt;MaterialIcon icon="keyboard_arrow_down" /&gt;
                &lt;/span&gt;
              &lt;/div&gt;
  
              {showOptions ? (
                &lt;HeaderOptions toggleOptions={this.toggleOptions} /&gt;
              ) : null}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>