UserNav.js

import React, { Component, PropTypes } from 'react';

class UserNav extends Component {
  constructor(props) {
    super(props);
    this.state = { showMenu: false };
    this.toggleMenu = this.toggleMenu.bind(this);
  }

  toggleMenu() {
    this.setState({ showMenu: !this.state.showMenu });
  }

  menuClass() {
    return this.state.showMenu && 'open';
  }

  render() {
    return (
      <ul className="nav pull-right user_account" data-role="toggle-user-menu">
        <li className={`dropdown ${this.menuClass()}`}>
          <a className="dropdown-toggle" href="#" onClick={this.toggleMenu}>
            <i className="icon icon_user"></i>
            <b className="caret"></b>
            <div className="active_bar"></div>
          </a>
          <ul className="dropdown-menu" role="menu" data-role="user-menu">
            <li><a href="/joins/new">Join Project</a></li>
            <li>
              <a href={`/users/${this.props.userId}/edit`}>Edit account</a>
            </li>
            <li><a href="/sign_out">Sign Out</a></li>
          </ul>
        </li>
      </ul>
    );
  }
}

UserNav.propTypes = {
  userId: PropTypes.number.isRequired
};

export default UserNav;