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 

```
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 => {
            const updatedtodos = prevState.todos.map(todo => {
                if(todo.id == id) {
                    todo.completed = !todo.completed
                }
                return todo
            })
            return {
                todos: updatedtodos
            }
        })
    }

    render() {
        const TodoItem = this.state.todos.map(item => <Todolist key={item.id} item={item} handleChange={this.handleChange}/>)
        return(
            <div>
                {TodoItem}
            </div>

        );
    }
}
export default App;

```

```
import React from 'react';

function Todolist (props){

    return(
        <div className="wholelist">
        <input 
        type="checkbox" 
        checked={props.item.completed}
        onChange={()=> props.handleChange(props.item.id)}
        />
        <label className="items">{props.item.name}</label>
        </div>

    );
}

export default Todolist;

```