React single, managed checkbox field. No state management,

Using Reactjs, a single, managed field. "Field" in this case refers to a group of input checkbox elements, matched on their name tag. No state management though.

by BrownieBoy

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="http://fb.me/react-js-fiddle-integration.js"></script>

		<h3>React, single managed input field, no state management</h3>
		<div id="main"></div>

CSS

label {
    display: block
}

JavaScript 1.7

var CheckboxInput = React.createClass({
  getInitialState: function () {
    return {
        checked: this.props.checked || false
     };
  },
  render: function () {
    return (
        <label>
            <input type="checkbox"
              name={this.props.name}
              checked={this.state.checked}
              onClick={this.handleClick}
              value={this.props.value} />
              {this.props.label}
      </label>
    );
  },
  handleClick: function(e) {
      this.setState({checked: e.target.checked});
  }
});
 
var CheckboxInputField = React.createClass({
    render: function() {
        var name = this.props.question.name;
        var mappedInputElements = this.props.question.values.map(function(data, key) {
            return (
              <CheckboxInput
                name={name}
                label={data.label}
                value={data.value} />
            );
        });
        return (
            <div>
                {mappedInputElements}
            </div>
        );
    }
});

var question = { name: "q1",
                 values: [
                     {label: "Apples", value: "apples"},
                     {label: "Bananas", value: "bananas"},
                     {label: "Kiwi fruit", value: "kiwi"}
                     
                 ]
                };

React.render(<CheckboxInputField question={question} />, document.getElementById("main"));