Setting state for the error

Author: karmeensec

src/App.tsx

@@ -10,10 +10,23 @@ const App: FC = () => {
   const [todos, setTodos] = useState<string[]>([]);
   const [toDoPosition, setToDoPosition] = useState<string>('all');
   const [toDoFilter, setToDoFilter] = useState<string[]>([]);
+  const [hasError, setHasError] = useState(false);
 
   const ToDoFilterHandler = function (): void {
 
+    switch (toDoPosition) {
 
+      case 'completed':
+        setToDoFilter(todos.filter((todo: any) => todo.completed === true));
+        break;
+
+      case 'incomplete':
+        setToDoFilter(todos.filter((todo: any) => todo.completed === false));
+
+      default:
+        setToDoFilter(todos);
+
+    }
 
   }
 
@@ -25,7 +38,7 @@ const App: FC = () => {
         <h3 style={{  fontSize: '2.5rem', fontFamily:  'Gloria Hallelujah', color: '#F7F9F9',}}>Your To Do List</h3>
       </header>
 
-      <AddTaskForm setToDoInput = {setToDoInput} todos = {todos} setTodos = {setTodos} toDoInput = {toDoInput} toDoPosition = {toDoPosition} setToDoPosition = {setToDoPosition} />
+      <AddTaskForm setToDoInput = {setToDoInput} todos = {todos} setTodos = {setTodos} toDoInput = {toDoInput} toDoPosition = {toDoPosition} setToDoPosition = {setToDoPosition} hasError = {hasError} setHasError = {setHasError} />
       <ToDoList todos = {todos} setTodos = {setTodos} />
 
     </div>