CODEWITHSUNDEEP
javascriptreactjs
CreativeDesign
CreativeDesign

Reputation: 101

React : Simple Todo App, Checked Box not updating

Working on a simple React project for learning purposes. I've been able to get everything functioning so far except for the checked box is not updating when it is clicked. The state of the app doesn't seem to update. Any help is appreciated!Thank you!

 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;

Upvotes: 1

Views: 103

Answers (1)

Martinez
Martinez

Reputation: 1130

You have a typo error just change this.setstate to this.setState

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,
          }
        })

      })
    }

Upvotes: 2

Related Questions