JSFiddle - React, Tailwind, and code Playground

by spicyj

HTML

<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.4.1/react.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.4.1/JSXTransformer.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var letters = "ABCDE".split("");
var many = [];
for (var i = 0; i < 10; i++) {
    many.push(letters[(Math.random() * 4) | 0]);
}

var Form = React.createClass({
    getInitialState: function() {
        var checked = {};
        letters.forEach(function(l) {
            checked[l] = false;
        });
        return {checked: checked};
    },

    render: function() {
        var rows = many.map(function(l, i) {
            return <div key={i}>
                <input
                    type="checkbox"
                    checked={this.state.checked[l]}
                    onChange={this.handleChange.bind(this, l)} />
                {l}
            </div>;
        }, this);
        return <div>{rows}</div>;
    },

    handleChange: function(lett, e) {
        var newChecked = {};
        letters.forEach(function(l) {
            newChecked[l] = (l === lett ?
                e.target.checked :
                this.state.checked[l]);
        }, this);
        this.setState({checked: newChecked});
    }
});

React.renderComponent(<Form />, document.body);