UserInfo component with detection of outside clicking

UserInfo.jsx

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import './userInfo.scss'

class UserInfo extends Component {
  constructor(props) {
    super(props);

    this.setWrapperRef = this.setWrapperRef.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  }
  /**
   * Set the wrapper ref
   */
  setWrapperRef(node) {
    this.wrapperRef = node;
  }

  /**
   * Alert if clicked on outside of element
   */
  handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      this.hideHiddenMenu()
    }
  }

  state = {
    showHiddenMenu: false
  }
  toggleHiddenMenu = () => {
    this.setState({ showHiddenMenu: !this.state.showHiddenMenu })
  }
  hideHiddenMenu = () => {
    this.setState({ showHiddenMenu: false })
  }
  render() {
    const { currentUser } = this.props
    return (
      <div className='user-info' ref={this.setWrapperRef}>
        <div className="img" style={{ backgroundImage: `url(${currentUser.photoURL})` }}></div>
        <div className="username">{ currentUser.displayName }</div>
        <div className="icon" onClick={this.toggleHiddenMenu}><i className="fa fa-list" aria-hidden="true"></i></div>

        {this.state.showHiddenMenu ? <HiddenMenu/> : null}
      </div>
    )
  }
}

const HiddenMenu = () => {
  
  return (
    <div className='hidden-menu'>
      <Link to='/profile'>Profile</Link>
      <div className="line"></div>
      <Link to='/chunks'>Chunks</Link>
      <Link to='/tags'>Tags</Link>
      <div className="line"></div>
      <div className="logout">
        <span>Logout</span>
        <i className="fa fa-sign-out" aria-hidden="true"></i>
      </div>
    </div>
  )
}
const mapStateToProps = state => ({
  currentUser: state.user.currentUser
})
export default connect(mapStateToProps)(UserInfo)