Issue 1: Delete a specific Todo item instead of removing all

src/components/AddTodoForm.tsx

@@ -13,6 +13,7 @@ function AddTodoForm({ addTodo }: AddTodoFormProps) {
     const [desc, setDesc] = useState<string>('');
 
     const handleSubmit = (event: React.FormEvent) => {
+        event.preventDefault();
         addTodo(title, desc);
         setTitle('');
         setDesc('');
@@ -23,6 +24,7 @@ function AddTodoForm({ addTodo }: AddTodoFormProps) {
             <div>
                 <label>Title:</label>
                 <input
+                    value={title}
                     type="text"
                     placeholder="Provide a title for the new To Do"
                     onChange={(e) => setTitle(e.target.value)}

src/components/Banner.tsx

@@ -1,4 +1,4 @@
-import React,  { useState, useEffect } from "react";
+import React,  { useState, useEffect, useRef } from "react";
 
 /*
  * Banner: pulls an image url from api.nasa.gov and displays the site banner
@@ -9,6 +9,10 @@ const Banner: React.FC = () => {
     const [currentImgUrl, setCurrentImgUrl] = useState<string | null>(null);
     const [copyright, setCopyright] = useState<string | null>(null);
 
+    // Refs to hold the latest image URLs
+    const imgUrlRef = useRef<string | null>(null);
+    const hdImgUrlRef = useRef<string | null>(null);
+
     useEffect(() => {
         const fetchImg = async () => {
             const res = await fetch('https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY');
@@ -18,13 +22,17 @@ const Banner: React.FC = () => {
             setHdImgUrl(data.hdurl);
             setCurrentImgUrl(window.innerWidth > 800 ? data.hdurl : data.url);
             setCopyright(data.copyright);
+
+            // update refs with the latest values
+            imgUrlRef.current = data.url;
+            hdImgUrlRef.current = data.hdurl;
         };
 
         fetchImg();
 
         const handleResize = () => {
             const bannerElement = document.querySelector('.banner');
-            bannerElement?.setAttribute('style', `background-image: url(${window.innerWidth > 800? hdImgUrl : imgUrl})`);
+            bannerElement?.setAttribute('style', `background-image: url(${window.innerWidth > 800? hdImgUrlRef.current : imgUrlRef.current})`);
         };
 
         window.addEventListener('resize', handleResize);

src/components/TodoItem.tsx

@@ -31,7 +31,7 @@ function TodoItem({ todo, deleteTodo, toggleComplete, toggleUrgent }: TodoItemPr
                 <button onClick={() => toggleUrgent(todo.id)}>
                     {todo.isUrgent ? 'Mark as not Urgent' : 'Mark as Urgent'}
                 </button>
-                {todo.isCompleted && <button onClick={() => deleteTodo(todo.id)}>Delete</button>}
+                <button onClick={() => deleteTodo(todo.id)}>Delete</button>
             </div>
         </li>
     );

src/components/TodoList.tsx

@@ -17,6 +17,7 @@ function TodoList({ todos, deleteTodo, toggleComplete, toggleUrgent }: TodoListP
         <ul>
             {todos.map((todo) => (
                 <TodoItem
+                    key={todo.id} // Added key prop here
                     todo={todo}
                     deleteTodo={deleteTodo}
                     toggleComplete={toggleComplete}

src/pages/index.tsx

@@ -32,12 +32,12 @@ export default function Home() {
       isUrgent: false,
     };
 
-    todos.push(newTodo);
-    setTodos(todos);
+    // Create a new array instead of mutating the existing one
+    setTodos([...todos, newTodo]);
   };
 
   const deleteTodo = (id: number) => {
-    setTodos(todos.filter((todo) => todo.id === id));
+    setTodos(todos.filter((todo) => todo.id !== id));
   };
 
   const toggleProperty = useCallback((id: number, property: keyof Pick<Todo, 'isCompleted' | 'isUrgent'>) => {
@@ -48,7 +48,7 @@ export default function Home() {
       return todo;
     });
     setTodos(updatedTodos);
-  }, [setTodos]);
+  }, [setTodos, todos]);
 
   const displayTodoList = (todoList:Todo[]) => {
     return (
@@ -62,13 +62,7 @@ export default function Home() {
   };
 
   const displayTodos = (displayUrgent: boolean) => {
-    return displayTodoList(todos.filter((x) => {
-      if (displayUrgent) {
-        return !x.isCompleted && x.isUrgent === displayUrgent;
-      } else {
-        return !x.isCompleted && x.isUrgent !== displayUrgent;
-      }
-    }));
+    return displayTodoList(todos.filter((x) => !x.isCompleted && x.isUrgent === displayUrgent));
   };
 
   const displayComplete = () => {