title: React.js can't change checkbox state
body: <p>I created this simple TODO list, and when I want to check the checkbox I can't.</p>
  
  <pre><code>import React from 'react';
  
  const TodoItem = React.createClass({
  
    render() {
      return (
        &lt;div&gt;
  
          &lt;span&gt;{this.props.todo}&lt;/span&gt;
          &lt;input type="checkbox" checked={this.props.done} /&gt;
  
        &lt;/div&gt;
      );
    }
  
  });
  
  export default TodoItem;
  </code></pre>
  
  <p>The parent:</p>
  
  <pre><code>import React from 'react';
  import TodoItem from './TodoItem';
  import AddTodo from './AddTodo';
  
  const TodoList = React.createClass({
  
    getInitialState() {
      return {
        todos: [{
          todo: 'some text',
          done:false
        },{
          todo: 'some text2',
          done:false
        },
        {
          todo: 'some text3',
          done:true
        }]
      };
    },
  
     addTodo (childComponent) {
      var todoText = childComponent.refs.todoText.getDOMNode().value;
      var todo = {
        todo: todoText,
        done:false
      };
      var todos = this.state.todos.concat([todo]);
      this.setState({
        todos:todos
      });
  
      childComponent.refs.todoText.getDOMNode().value = '';
    },
  
    render() {
  
      var Todos = this.state.todos.map(function(todo) {
        return (
             &lt;TodoItem todo={todo.todo} done={todo.done} /&gt;
          )
      });
  
      return (
        &lt;div&gt;
         {Todos}
         &lt;AddTodo addTodo={this.addTodo}/&gt;
        &lt;/div&gt;
  
      );
    }
  
  });
  
  export default TodoList;
  </code></pre>