JSFiddle - React, Tailwind, and code Playground

by BrownieBoy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
		<h1>React Checkbox Test</h1>
		<div id="main"></div>

JavaScript

/** @jsx React.DOM */

var CheckboxField = React.createClass({
    propTypes: {
        values: React.PropTypes.object.isRequired
    },
    getDefaultProps: function () {
        return {
            values: {
                label: "Place holder text"                
            }
        };
    },
    render: function() {
        return (
            <label htlmFor={this.props.values.id}>
                <input type="checkbox"
                    name={this.props.values.name}
                    id={this.props.values.id}
                    value={this.props.values.value}
                    checked={this.props.values.checked}
                    onChange={this.handleChange} />
                {this.props.values.label} <br />
            </label>
        );
    },
    handleChange: function(event) {
        // Should use this to set parent's state via a callback func.  Then the
        // change to the parent's state will generate new props to be passed down
        // to the children in the render().
        this.props.callBackOnChange(this, event.target.checked);
    }
});


var CheckboxFieldGroup = React.createClass({
    propTypes: {
        defaultValues: React.PropTypes.object.isRequired
    },
    getInitialState: function () {
        // default props passed in to CheckboxFieldGroup (this componenent) will be used to set up the state.  State
        // is stored in this component, and *not* in the child CheckboxField components.  The state store in this
        // component will, in turn, generate the props for the child CheckboxField components.  When the latter
        // are updated (i.e. clicked) by the user, then the event will call the handleChange() function in
        // this component.  That will generate update this component's state, which in turn will generate
        // new props for the child CheckboxField components, which will cause those components to re-render!
        var that = this;
        var initStateArray =...