Фильтровать массив onClick и отобразить оставшиеся элементы из массива

Я создал приложение todo, и я пытаюсь фильтровать todos в трех разных условиях, завершенных, незавершенных. По умолчанию я хочу показать все элементы, а затем отфильтровать их. Я знаю, что я могу использовать фильтр следующим образом:

array.filter(t => t.completed) or array.filter(t => !t.completed)

, но я не знаю, как отображать их все, а затем отображать только отфильтрованные элементы. Код выглядит следующим образом:

render() {
let notes = this.state.notes.filter(n => n.completed).map((todo, 
index) => {
  return (
    <Todo 
      key={index} 
      note={todo} 
      deleteTodo={() => this.deleteTodo(index)} 
      handleClick={() => this.handleClick(index)}/>
  );
});
const allNotes = this.state.notes.length
let completedNotes = this.state.notes.filter(n => n.completed).length
let incompletedNotes = this.state.notes.filter(n => 
!n.completed).length
return (<div>{notes}</div>);