React single, controlled checkbox field, with a poor attempt at state management

Using Reactjs, a single, controlled field. "Field" in this case refers to a group of input checkbox elements, matched on their name tag. This is a first, deliberately very poor attempt at state management

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 controlled input field, poor attempt at 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});
  }
  console.log(this.state.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}
                ref={data.value}
                value={data.value} />
            );
        });
        return (
            <div>
                {mappedInputElements}
            </div>
        );
    },
    getRefsState: function() {
        var stateArray = [];
        var inputElement;
        // this.refs returns an associative array, and .map() doesn't work on those.
        for (var inputElementKey in this.refs) {
            inputElement = this.refs[inputElementKey];
             stateArray.push({
                 value: inputElement.props.label,
                 checked: inputElement.state.checked
            });
        }
        console.log("stateArray = " + stateArray.toString());
        debugger;
        },
    componentDidMount: function() {
        this.getRefsState();
    },
    componentDidUpdate: function() {
        this.getRefsState();
    }
});

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