React.js can't change checkbox state

Question

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; 

Answer 1

When you haven't specified an onChange handler on your inputs React will render the input field as read-only.

getInitialState() {     return {         done: false     }; } 

and

<input type="checkbox" checked={this.state.done || this.props.done } onChange={this.onChange} />