React checkbox

Playing with flux and react to update a checkbox state.

by aniketmhatre88

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<p>The colored square should be red when the box is not checked and blue when the box is checked.</p>

<div id="container">
    <div class="list-tile list-tile-single">
                                <label class="list-tile-action">
                                    <span class="list-tile-icon">
                                        <input type="checkbox" name="SelectedPrograms" value="BBA" />
                                        <span class="icon icon-checkbox"></span>
                                    </span>
                                    <span class="list-tile-text">
                                        <span class="list-tile-text-title">Label</span>
                                    </span>
                                </label>
                            </div>
</div>

SCSS

.icon {
    height: 24px;
    width: 24px;
    display: inline-block;
}

.icon-checkbox, .Checked .icon-checkbox {
    background: blue;
}

:not(:checked) + .icon-checkbox, .Unchecked .icon-checkbox {
    background: red;
}

.list-tile-icon input[type=checkbox] + .icon {
    display: block;
}

JavaScript 1.7

var Checkbox = React.createClass({
    getInitialState: function() {
        return {
            checked: false
        }
    },
    handleChange: function(event) {
        this.setState({ checked: event.target.checked });
        this.render();
    },
    render: function() {
        var label = this.state.checked ? 'list-tile-icon Checked' : 'list-tile-icon Unchecked';
        
        return (<div className="list-tile list-tile-single">
                                <label className="list-tile-action">
                                    <span className={label}>
                                        <input type="checkbox" onChange={this.handleChange} name="SelectedPrograms" value="BBA" />
                                        <span className="icon icon-checkbox"></span>
                                    </span>
                                    <span className="list-tile-text">
                                        <span className="list-tile-text-title">{label}</span>
                                    </span>
                                </label>
                            </div>);
    }
});
 
React.render(<Checkbox name="Checkbox state" />, document.getElementById('container'));