gistfile1.js

  var Tabs = React.createClass({
    handleClick: function(event){
      event.preventDefault();
      console.log(this);
    },
    render: function(){
      var self = this;
      var tabs = this.props.tabs.map(function(tab,index){
        var clickHandler = self.handleClick;
        return (<li key={'tab'+index}><a ref={'tab'+index} href="#" onClick={clickHandler} > {tab.meta.title}</a></li>)
      });
      return (
        <nav>
          <ul>
            {tabs}
          </ul>
        </nav>
        )
    }
  });

  var Content = React.createClass({
    render: function(){
      return(
        <article>
         <header>
          <h4>{this.props.content.meta.title}</h4>
        </header>
        <section>
          {this.props.content.content}
        </section>
      </article>
      )
    }
  });

  var Images = React.createClass({
    render: function(){
      var images = this.props.images.map(function(image,index){
        var imageUrl = image.meta.image;
        var imageStyle = {
          backgroundImage: 'url("/images/'+imageUrl+'")'
        };
        return (<article key={image+index} style={imageStyle}></article>)
      });
      return(
        <section>
          {images}
        </section>
        )
    }
  });

  var Container = React.createClass({
    getInitialState: function(){
      return({
        activeIndex: 0
      })
    },
    changeTabs: function(index){
      this.setState({activeIndex: index});
      console.log(index)
    },
    render: function(){
      var content = this.props.content[this.state.activeIndex];
      return (
        <section className="wrapper grid-text-top">

          <Tabs tabs={this.props.content} tabHandler={this.changeTabs}/>
          <Content content={content}/>
          <Images images={this.props.content}/>

        </section>
        )
    }
  });
  var targetId = '{{currentPage.subRoutes[0].urlSegment}}-1';
  
  React.render(<Container content={machines} />, document.getElementById(targetId));