title: todo list app - onChange on ReactJS doesn't work?
body: <p>I am new to ReactJS and I'm doing a simple to-list with it. I am working on the part of check box. What I want to do is to uncheck the box whenever i click it or vice versa. But nothing has been changed, so I am wondering if anything wrong....
  Below is the App.js and index.js file </p>
  
  <pre><code>import React from 'react';
  import Todolist from './Todolist';
  import todoData from './todoData';
  
  class App extends React.Component {
      constructor(){
          super()
          this.state = {
              todos: todoData //grab the raw data 
          }
          this.handleChange = this.handleChange.bind(this)
      }
  
      handleChange (id){
          console.log(id)
          this.setState (prevState =&gt; {
              const updatedtodos = prevState.todos.map(todo =&gt; {
                  if(todo.id == id) {
                      todo.completed = !todo.completed
                  }
                  return todo
              })
              return {
                  todos: updatedtodos
              }
          })
      }
  
      render() {
          const TodoItem = this.state.todos.map(item =&gt; &lt;Todolist key={item.id} item={item} handleChange={this.handleChange}/&gt;)
          return(
              &lt;div&gt;
                  {TodoItem}
              &lt;/div&gt;
  
          );
      }
  }
  export default App;
  </code></pre>
  
  <pre><code>import React from 'react';
  
  function Todolist (props){
  
      return(
          &lt;div className="wholelist"&gt;
          &lt;input 
          type="checkbox" 
          checked={props.item.completed}
          onChange={()=&gt; props.handleChange(props.item.id)}
          /&gt;
          &lt;label className="items"&gt;{props.item.name}&lt;/label&gt;
          &lt;/div&gt;
  
      );
  }
  
  export default Todolist;
  </code></pre>