reactjs checkbox check and unchecked event

Question

I made a todo app and I wanted to improvise it by showing all completed task

Checking "Show completed task" works fine and shows me all completed task using the code below

// App.js
filterCompleted = () => {
  this.setState({todos: [...this.state.todos.filter(todo => {return todo.completed === true})]})
}

// NavBar.js
<input type="checkbox" onChange={ () => this.props.filterCompleted()}></input> <span> Show completed 
task</span>

Un-checking the "Show completed task" should bring me back the original state
I tried checking if the checkbox is checked or not but the code below doesn't seems to work.

// App.js
filterCompleted = (filter) => {
if(filter.checked){
  alert('checked')
  //this.setState({todos: [...this.state.todos.filter(todo => {return todo.completed === true})]})
}
else{
  alert('unchecked  ')
    }
}

//NavBar.js
input type="checkbox" onChange={() => this.props.filterCompleted(this)}></input> <span> Show completed task</span>

thortsx · Accepted Answer · 2019-12-16 02:56:18Z

1

Try to send event inside input:

<input type="checkbox" onChange={event => this.props.filterCompleted(event)}></input> 
<span> Show completed task</span>

Or just:

<input type="checkbox" onChange={this.props.filterCompleted}></input> 
<span> Show completed task</span>

And in App.js:

filterCompleted = event => {
   if(event.target.checked){
      alert('checked')
   } else {
     alert('unchecked  ')
   }
}

answered Dec 16, 2019 at 2:56

thortsx

2,2802 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Drew Cordano Over a year ago

both works, i have a lil problem on the else/uncheck statement, it does not give me my original state...

see sharper · Accepted Answer · 2019-12-16 03:43:54Z

0

You need to send the state of the checkbox to decide whether to filter or not:

// App.js
filterCompleted = (filter) => {
  this.setState({filteredTodos: [...this.state.todos.filter(todo => filter ? todo.completed : true)]})
}

// NavBar.js
<input type="checkbox" onChange={ e => this.props.filterCompleted(e.target.checked)}></input> <span> Show completed 
task</span>

Make sure to iterate over state.filteredTodos in the view, not state.todos, and make sure to run this.filterCompleted(false) at the start so filteredTodos is set to the full array.

Note there is a better way to do this, which is to filter the todos in the render function. Something like:

render() {
    const filtered = this.state.todos.filter(t => this.state.filterCompleted ? t.completed : true);
    return (
        this.filtered.map(...); // render component here
    )
}

In that case you would simply toggle state.filterCompleted when the user toggles the checkbox.

(Note the slight simplification of the arrow function. If your arrow function begins with return, then get rid of the braces and the return. An arrow function without braces has an implicit return. Makes it simpler and easier to read.)

edited Dec 16, 2019 at 3:43

answered Dec 16, 2019 at 2:57

see sharper

12.2k8 gold badges53 silver badges68 bronze badges

4 Comments

Drew Cordano Over a year ago

works, i'm having trouble upon unchecking the checkbox, it should give me all the state whether completed or not.

see sharper Over a year ago

The code above should do that. What are you seeing?

Drew Cordano Over a year ago

after checking "Show completed task" it shows the completed task, after unchecking, the completed task remains as if nothing happens.

see sharper Over a year ago

Ah OK I get it. We need to keep track of the unfiltered list. My mistake. Code edited.

Collectives™ on Stack Overflow

reactjs checkbox check and unchecked event

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related