Trabajando en un proyecto React simple con fines de aprendizaje. He podido hacer que todo funcione hasta ahora, excepto que la casilla marcada no se actualiza cuando se hace clic en ella. El estado de la aplicación no parece actualizarse. ¡Cualquier ayuda se agradece, gracias!

 import React from 'react'; let id = 0 const Todo = props => ( <li> <input type="checkbox" checked={props.todo.checked} onChange={props.onToggle} /> <button onClick = {props.onDelete}> delete</button> <span>{props.todo.text}</span> </li> ) class App extends React.Component { constructor() { super() this.state = { todos: [], } } addTodo() { const text = prompt("TODO TEXT PLEASE!") this.setState({ todos: [...this.state.todos, {id: id++, text: text, checked: false}, ] }) } toggleTodo(id) { this.setstate({ todos: this.state.todos.map(todo => { if (todo.id !== id) return todo return { id: todo.id, text: todo.text, checked: !todo.checked, } }) }) } render() { return ( <div> <div> Todo Count: {this.state.todos.length}</div> <div> Unchecked Count: {this.state.todos.filter(todo => !todo.checked).length} </div> <button onClick={() => this.addTodo()}> Add TODO </button> <ul> {this.state.todos.map(todo => ( <Todo onToggle={() => this.toggleTodo(todo.id)} onDelete={() => this.removeTodo(todo.id)} todo={todo} /> ))} </ul> </div> ) } } export default App;