I created this simple TODO list, and when I want to check the checkbox I can't.

import React from 'react';



const TodoItem = React.createClass({



  render() {

    return (

      <div>



        <span>{this.props.todo}</span>

        <input type=checkbox checked={this.props.done} />



      </div>

    );

  }



});



export default TodoItem;

The parent:

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 (

           <TodoItem todo={todo.todo} done={todo.done} />

        )

    });



    return (

      <div>

       {Todos}

       <AddTodo addTodo={this.addTodo}/>

      </div>



    );

  }



});



export default TodoList;