click-out-side.js

class Dropdown extends Component {
  state = {
     show: false
  }

  componentDidMount() {
    document.addEventListener('click', this.handleClickOutside, true);
  }
    
  componentWillUnmount() {
    document.removeEventListener('click', this.handleClickOutside, true);
  }

  showContent = () => this.setState({ show: true })
  hideContent = () => this.setState({ show: false })
    
   // Handle function when user click outside container
  handleClickOutside = (e) => {
    const { onClickOutside } = this.props;

    if (!this.container.contains(e.target) && this.state.show) {
      onClickOutside(e);
    }
  }
  
  render() {
    if (!show) return null;
    return (
      <div ref={(el) => { this.container = el; }}>
        the content dude
      </div>
    )
  }
}