reactjs checkbox check and unchecked event

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 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>