Tabs.jsx

Tabs = React.createClass({
  /**
  * Sets the activeTabIndex state
  * @index the index you would like to set to active
  */
  setActiveTab (index) {
    this.setState({
      activeTabIndex : index
    });
  },
  /**
  * Get the initial state of the component
  */
  getInitialState () {
    return {
      activeTabIndex : this.props.activeTabIndex || 0
    };
  },
  /**
  * Render the component
  */
  render () {
    let instance = this;
    return (
      <div className="tabs">
        {
          React.Children.map(instance.props.children, function (child, index) {
            return React.cloneElement(child, {
              setActiveTab: instance.setActiveTab,
              activeTabIndex : instance.state.activeTabIndex
            });
          })
        }
      </div>
    );
  }
});

TabList = React.createClass({
  /**
  * Render the component
  */
  render () {
    let instance = this;
    return (
      <ul className="tab-list" >
        {
          React.Children.map(instance.props.children, function (child, index) {
            return React.cloneElement(child, {
              setActiveTab: instance.props.setActiveTab,
              activeTabIndex : instance.props.activeTabIndex,
              tabIndex : index
            });
          })
        }
      </ul>
    );
  }
});

Tab = React.createClass({
  /**
  * Handle the click event
  * @event the synthetic click event
  */
  handleClick (event) {
    //Call the parent set tab function
    this.props.setActiveTab(this.props.tabIndex);
  },
  /**
  * Get the tab classes based on the tab index
  */
  getClassName () {
    return ["tab", this.props.activeTabIndex === this.props.tabIndex ? "active" : ""].join(" ");
  },
  /**
  * Render the component
  */
  render () {
    let instance = this;
    return (
      <li
        className={ this.getClassName() }
        onClick={ this.handleClick }>
        { this.props.children }
      </li>
    );
  }
});

TabBody = React.createClass({
  /**
  * Render the component
  */
  render () {
    let instance = this;
    return (
      <div className="tab-body">
        {
          React.Children.map(instance.props.children, function (child, index) {
            return React.cloneElement(child, {
              tabClick: instance.props.tabClick,
              activeTabIndex : instance.props.activeTabIndex,
              tabIndex : index
            });
          })
        }
      </div>
    );
  }
});

TabPanel = React.createClass({
  /**
  * Get the tab classes based on the tab index
  */
  getClassName () {
    return ["tab-panel", this.props.activeTabIndex === this.props.tabIndex ? "active" : ""].join(" ");
  },
  /**
  * Render the component
  */
  render () {
    let instance = this;
    return (
      <div className={ instance.getClassName() }>
        { instance.props.children }
      </div>
    );
  }
});