React Events

component.js

export default class extends React.Component {
  constructor(props) {
    super(props)
    this.state = { menuActive: false }
    this.toggleNavigation = this.toggleNavigation.bind(this)
    this.closeNavigation = this.closeNavigation.bind(this)
  }

  componentDidMount() {
    document.body.addEventListener('click', this.closeNavigation)
  }

  componentWillUnmount() {
    document.body.removeEventListener('click', this.closeNavigation)
  }

  toggleNavigation(e) {
    console.log('Fires second')
    this.setState({ menuActive: !this.state.menuActive })

    e.preventDefault()
    e.stopPropagation()
  }

  closeNavigation() {
    if (this.state.menuActive) {
      console.log('Fires first')
      this.setState({ menuActive: false })
    }
  }

  render () {
    return (
      <header>
        <div className="header-top">
          <a onClick={this.toggleNavigation}>
            <h2>Menu</h2>
          </a>
        </div>
      </header>
    )
  }
}