JSFiddle - React, Tailwind, and code Playground

by Ross Allen

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<div id="app"></div>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var TitleRotator = React.createClass({
  getInitialState: function() {
    return {
      activeChildIndex: 0
    };
  },

  cycleActiceChild: function() {
    var i = this.state.activeChildIndex;
    i = i + 1;

    if (!Array.isArray(this.props.children) || i > this.props.children.length - 1) {
      i = 0;
    }

    this.setState({activeChildIndex: i});
  },

  render: function() {
    return (
      <div>
        {Array.isArray(this.props.children) ?
          this.props.children[this.state.activeChildIndex] :
          this.props.children}
      </div>
    );
  }
});

var App = React.createClass({
  rotateTitle: function() {
    this.refs.rotator.cycleActiveChild();
  },

  render: function() {
    return (
      <div>
        <TitleRotator ref="rotator">
          <h1>Hey there</h1>
          <h1>Howdy, partner</h1>
          <h1>These are some great titles</h1>
        </TitleRotator>
        <button type="button" onClick={this.rotateTitle}>Rotate Title</button>
      </div>
    );
  }  
});

React.renderComponent(
  <App />,
  document.getElementById("app")
);