Navbar.js

import {connect} from 'react-redux'

import { toggleMenu } from '../../actions/uiState'

import React, { Component } from 'react'

import 'hamburgers/dist/hamburgers.min.css'

import './style.scss'

const Navbar =  class Navbar extends Component {
  constructor(props) {
    super(props)
    this.state = {
      active: false,
    }
  }

  render() {
    return (
      <nav id="navbar-component" className="container-fluid">
        <div className="row">
          <div className="col-2">
            <button className={(this.props.active ? 'is-active' : '') + ' hamburger--collapse hamburger'}
              type="button"
              onClick={() => {
                // this.setState({ active: !this.props.active })
                this.props.onClickHamburger()
              }}>
            <span className="hamburger-box">
              <span className="hamburger-inner"></span>
            </span>
          </button>
          </div>
          <div className="col-8 text-center">
            <p id="fan-name">{this.props.fanName}</p>
          </div>
        </div>
        <div className="col-2"></div>
      </nav>
    )
  }
}

Navbar.defaultProps = {
  fanName: 'fancyU',
}


const mapStateToProps = (state) => {
  return {
    active: state.ui.menu.active,
    test: state.ui.menu.test,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onClickHamburger: () => {
      dispatch(toggleMenu())
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Navbar)