import React from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
import ‘bootstrap/dist/css/bootstrap.css’
import Todo from ‘./components/Todo’
import data from ‘./components/Data’
class App extends React.Component{
constructor(){
super()
this.state = {
todos : data
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(id){
console.log(‘Working’, id)
this.setState(prevState => {
const updateTodo = prevState.todos.map(todo => {
if (todo.id === id){
todo.completed = !todo.completed
}
return todo
})
return { todos : updateTodo }
})
}
render(){
return (
{this.state.todos.map(item => {
return(
)
})}
)
}
}
export default App;
import React from ‘react’
function Todo(props){
return (
<input type=‘checkbox’
checked={props.item.completed}
onChange={() => props.handleChange(props.item.id)}
/>
{props.item.name}
)
}
export default Todo;
//And this is the data
const data = [
{
id : 1,
name : ‘Go to the Bar’,
completed : true
},
{
id : 2,
name : ‘Go to the Club’,
completed : false
},
{
id : 3,
name : ‘Go Watch Football’,
completed : false
},
]
export default data;
The problem i’m facing is that the handleChange function isn’t making the checkbox change state when clicked