Toggling active class on buttons in ReactJs

Question

I am trying to toggle the active class in a button group on ReactJs. I followed an example posted by somebody but cannot seem to get it to work. Below is my code:

class ButtonGroup extends React.Component {

    constructor() {
      super();
      this.state = {
        active: this.props.active || 0
      };
    }

    clickHandler(e) {
      var nodes = Array.prototype.slice.call( e.currentTarget.children );
      var index = nodes.indexOf( e.target );
      e.preventDefault();
      this.setState({ active: index });
    }

    render() {

      var buttons = this.children.map(function(child, i) {
        if (i === this.state.active) child.props.className += ' active';
        return child;
      }, this)

      return (
        <div className="ButtonGroup" onClick={this.clickHandler.bind(this)}>
            { buttons }
        </div>
      )
    }
}

class Nav extends React.Component {

  render() {
    return (
      <ButtonGroup>
        <a onClick={Link.handleClick} href="/profile" className="MenuLink active">Profile</a>
        <a onClick={Link.handleClick} href="/profile/works" className="MenuLink">Works</a>
        <a onClick={Link.handleClick} href="/profile/activity" className="MenuLink">Activity</a>
        <a onClick={Link.handleClick} href="/profile/following" className="MenuLink">Following <span className="FollowCount">{this.props.following}</span></a>
        <a onClick={Link.handleClick} href="/profile/followers" className="MenuLink">Followers <span className="FollowCount">{this.props.followers}</span></a>
      </ButtonGroup>
    );
  }
}

The error I am getting:

Unhandled promise rejection TypeError: Cannot read property 'active' of undefined(…)

React Version: 0.14-rc1

Would really appreciate if my error is pointed out and for a solution to this. Thanks a lot.

Answer 1

First off, this.children should be this.props.children . ( Note , if you're passing children dynamically you need to remember that passing just 1 child will not yield an Array as when passing multiple children and therefore this.props.children.map() will not work.)

Secondly, this.props and succinctly this.context won't be populated in the constructor of the class unless you're passing the props to both constructor and super . Therefore either passing them or moving it out of the constructor entirely are the ways to go.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: this.props.active || 0
        }
    }
}

Thirdly, without knowing what Link.handleClick is, your code should work if you fix the above things.

And lastly, just as a matter of taste and preference, instead of littering your code with this.someMethodOnMyReactComponent.bind(this) you could bind it straight up when defining the method.

someMethodOnMyReactComponent = (args) => {}