I have:
constructor(props) {
super(props);
this.state = {
activeDropdown: null,
mouseInDropdown: false,
...
<div className="filter_container">
<DropdownMenu text="New" count={127} disabled/>
<DropdownMenu text="Only show" isOpen={this.state.activeDropdown === "Only_show"} onClick={() => this.setState({ activeDropdown: "Only_show"})} onMouseEnter={() => this.setState({ mouseInDropdown: true })} onMouseLeave={() => this.setState({ mouseInDropdown: false })}>
<li>New</li>
<li>Old</li>
</DropdownMenu>
<DropdownMenu text="item select" isOpen={this.state.activeDropdown === "item_select"} onClick={() => this.setState({ activeDropdown: "item_select"})} onMouseEnter={() => this.setState({ mouseInDropdown: true })} onMouseLeave={() => this.setState({ mouseInDropdown: false })}>
<li>K</li>
<li>U</li>
</DropdownMenu>
<DropdownMenu text="Sort by" isOpen={this.state.activeDropdown === "Sort_by"} onClick={() => this.setState({ activeDropdown: "Sort_by"})} onMouseEnter={() => this.setState({ mouseInDropdown: true })} onMouseLeave={() => this.setState({ mouseInDropdown: false })}>
<li>Name</li>
<li>Age</li>
<li>Value</li>
</DropdownMenu>
DropdownMenu.js
render() {
return <div className="dropdown__menu" onClick={this.props.onClick}>
{this.props.text} {this.state.count > 0 ? <b>{this.state.count}</b> : ''}
<div className="dropdown__content" style={this.props.isOpen ? {'display': 'block'} : {'display': 'none'}} onMouseEnter={this.props.onMouseEnter} onMouseLeave={this.props.onMouseLeave}>
{this.props.children}
</div>
</div>
}
How do I make it so that if I click anywhere but inside the menu, the currently open menu closes?