title: ReactJS Dropdown menu, close other menus before opening current
body: <p>I have made some dropdown menus:</p>
  
  <pre><code>export default class DropdownMenu extends Component {
  
      constructor(props) {
          super(props)
  
          this.state = {
              menuOpen: false,
              highlight: false,
              count: this.props.count | 0
          }
          this.showDropdown = this.showDropdown.bind(this);
      }
  
      componentDidMount() {
  
      }
  
      showDropdown() {
              this.setState({
                  menuOpen: !this.state.menuOpen
              });
      }
  
      render() {
          return &lt;div className="dropdown__menu" onClick={this.showDropdown}&gt;
              {this.props.text} {this.state.count &gt; 0 ? &lt;b&gt;{this.state.count}&lt;/b&gt; : ''}
              &lt;div className="dropdown__content" style={this.state.menuOpen ? {'display': 'block'} : {'display': 'none'}}&gt;
                  {this.props.children}
              &lt;/div&gt;
          &lt;/div&gt;
      }
  }
  </code></pre>
  
  <p>The issue is that you can open all of them and leave them open until you click on them again to close them. How do I make it so that any other menu that is open gets closed if another is opened?</p>
  
  <hr>
  
  <p>Here is where they are implemented:</p>
  
  <pre><code>render() {
          ...
                  &lt;div className="filter_container"&gt;
                      &lt;DropdownMenu text="New" count={127} disabled/&gt;
                      &lt;DropdownMenu text="Only show"&gt;
                          &lt;li&gt;New&lt;/li&gt;
                          &lt;li&gt;Old&lt;/li&gt;
                      &lt;/DropdownMenu&gt;
                      &lt;DropdownMenu text="Other"&gt;
                          &lt;li&gt;one&lt;/li&gt;
                          &lt;li&gt;two&lt;/li&gt;
                      &lt;/DropdownMenu&gt;
                      &lt;DropdownMenu text="Sort by"&gt;
                          &lt;li&gt;Name&lt;/li&gt;
                          &lt;li&gt;Age&lt;/li&gt;
                          &lt;li&gt;Value&lt;/li&gt;
                      &lt;/DropdownMenu&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  ...
  </code></pre>