Dileet Dileet - 1 month ago 22
Javascript Question

React Hamburger menu onclick

I have a

Nav.js
component and using http://bokuweb.github.io/re-bulma/#NavToggle for styling.

I'm trying to make it so when you click on the hamburger menu that comes with the
<NavToggle/>
component, that I can set the props to isActive and display the menu.

This is my current
Nav.js
code:

import React from 'react';
import { Link } from 'react-router';
import { prefixLink } from 'gatsby-helpers';



import { Nav, NavGroup, NavItem, NavToggle, Icon } from 're-bulma';



export default class nav extends React.Component {
static propTypes = {
name: React.PropTypes.string,
};

constructor(props) {
super(props);
this.showToggleNav = this.showToggleNav.bind(this);
}

showToggleNav() {
this.props.isActive
}



render() {
return (
<div>
<Nav>
<NavGroup align="left">
<NavItem>
<Link to={prefixLink('/')}>
<h2>Dillon Raphael</h2>
</Link>
</NavItem>
</NavGroup>

<NavToggle onClick={this.showToggleNav} />

<NavGroup align="right" isMenu>
<NavItem>
</NavItem>
<NavItem>
</NavItem>
<NavItem>
<a href="#" onClick={this.props.showModal}>Let's Work!</a>
</NavItem>
</NavGroup>
</Nav>



</div>
);
}
}


Yes, I'm using Gatsby. I love it. It's helping me learn React.

Answer

So, you need this component to be aware of whether or not the nav is active, you need to be able to change that status from one to the other, and you need to pass that information from this component to its children. This would be a great place to use component state.

I see that you're trying to set the isActive variable with this function here:

  showToggleNav() {
    this.props.isActive
  }

This isn't working for a couple of reasons:

  1. Props are read-only and can't be modified.
  2. This function doesn't actually do anything -- it simply accesses the isActive prop when it is called and doesn't do anything with it.

So, what you need to do here is use state instead of props, and update your function to actually modify the value of the component's state.

Update your constructor to add local state to the component:

  constructor(props) {
    super(props);
    this.showToggleNav = this.showToggleNav.bind(this);
    this.state = {
        isActive: false
    };
  }

Update your function to set the state when it's called, using a React component function called setState:

  showToggleNav() {
     this.setState({ isActive: true });
  }

Update your render method to inform child components, via their props, that the nav is active:

  render() {
    return (
      <div>
        <Nav>
          <NavGroup align="left">
            <NavItem>
              <Link to={prefixLink('/')}>
                <h2>Dillon Raphael</h2>
              </Link>
            </NavItem>
          </NavGroup>

          <NavToggle isActive={this.state.isActive} onClick={this.showToggleNav} />

          <NavGroup align="right" isMenu>
            <NavItem>
            </NavItem>
            <NavItem>
            </NavItem>
            <NavItem>
              <a href="#" onClick={this.props.showModal}>Let's Work!</a>
            </NavItem>
          </NavGroup>
        </Nav>



      </div>
    );
  }

Here I've passed it to NavToggle, but you can just add it to other child components that need to know the active state in a similar fashion.

Comments