ReactTabs.jsx

Tabs = React.createClass({
  tabClick (tab) {
    this.setState({
      activeTabIndex : tab.props.tabIndex
    });
  },
  getInitialState () {
    return {
      activeTabIndex : 0
    };
  },
  render () {
    let instance = this;
    return (
      <div className="tabs">
        {
          React.Children.map(instance.props.children, function (child, index) {
            return React.cloneElement(child, {
              tabClick: instance.tabClick,
              activeTabIndex : instance.state.activeTabIndex
            });
          })
        }
      </div>
    );
  }
});

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

Tab = React.createClass({
  handleClick (event) {
    this.props.tabClick(this);
  },
  getClassName () {
    return ["tab", this.props.activeTabIndex === this.props.tabIndex ? "active" : ""].join(" ");
  },
  render () {
    let instance = this;
    return (
      <li className={ this.getClassName() } onClick={ this.handleClick }>
        { this.props.children }
      </li>
    );
  }
});

TabBody = React.createClass({
  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({
  getClassName () {
    console.log(this.props.activeTabIndex , this.props.tabIndex);
    return ["tab-panel", this.props.activeTabIndex === this.props.tabIndex ? "active" : ""].join(" ");
  },
  render () {
    let instance = this;
    return (
      <div className={ this.getClassName() }>
        { instance.props.children }
      </div>
    );
  }
});

Render.jsx

RenderTemplate = React.createClass({
  render () {
    return (
        <Tabs>
	  <TabList>
		  <Tab>Updates</Tab>
		  <Tab>Contracts</Tab>
		  <Tab>Projects</Tab>
	  </TabList>
	  <TabBody>
		  <TabPanel>
		  	Update Panel
		  </TabPanel>
		  <TabPanel>
		  	Contracts Panel
		  </TabPanel>
		  <TabPanel>
		  	Projects Panel
		  </TabPanel>
	  </TabBody>
  </Tabs>
    );
  }
})