JSFiddle - React, Tailwind, and code Playground

by spicyj

HTML

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

JavaScript 1.7

/** @jsx React.DOM */

var ViewA = React.createClass({
    render: function() {
        return <div onClick={this.handleClick}>View A</div>;
    },
    handleClick: function() {
        this.props.addSiblings();
    }
    
});

var ViewB = React.createClass({
    render: function() {
        return <div>View B</div>;
    }
});

var Hello = React.createClass({
    getInitialState: function() {
        return {
            numGroups: 2
        };
    },
    render: function() {
        var views = [];
        for (var i = 0; i < this.state.numGroups - 1; ++i) {
            views.push(<ViewA addSiblings={this.addSiblings}/>);
            views.push(<ViewB />);
        }
        views.push(<ViewA addSiblings={this.addSiblings}/>);
        return <div>{views}</div>;
    },
    addSiblings: function() {
        this.setState({numGroups: this.state.numGroups + 1});
    }
    
});
 
React.renderComponent(<Hello />, document.body);