Update structure

src/App.jsx

@@ -1,22 +1,18 @@
 import { useState } from "react";
 import "./styles.css";
+import { NewTodoForm } from "./newtodoform";
+import { TodoList } from "./todolist";
 
 export default function App() {
-  const [newItem, setNewItem] = useState("");
   const [todos, setTodos] = useState([]);
 
-  function handleSubmit(e) {
-    e.preventDefault();
-    const title = newItem.trim();
-    if (!title) return;
-
+  function addTodo(title) {
     setTodos((currentTodos) => {
       return [
         ...currentTodos,
         { id: crypto.randomUUID(), title, completed: false },
       ];
     });
-    setNewItem("");
   }
 
   function toggleTodo(id, completed) {
@@ -33,46 +29,10 @@ export default function App() {
 
   return (
     <div className="container">
-      <form onSubmit={handleSubmit} className="new-item-form">
-        <label className="title">New Todos</label>
-
-        <input
-          value={newItem}
-          onChange={(e) => setNewItem(e.target.value)}
-          type="text"
-          id="Item"
-          className="input"
-        />
-
-        <button type="submit" className="btn add">
-          Add
-        </button>
-      </form>
+      <NewTodoForm onSubmit={addTodo} />
 
       <h1 className="header">Todo List</h1>
-
-      <ul className="list">
-        {todos.map((todo) => (
-          <li key={todo.id} className="todo">
-            <label>
-              <input
-                type="checkbox"
-                checked={todo.completed}
-                onChange={(e) => toggleTodo(todo.id, e.target.checked)}
-              />
-              {todo.title}
-            </label>
-
-            <button
-              className="btn delete"
-              onClick={() => deleteTodo(todo.id)}
-              type="button"
-            >
-            Delete
-            </button>
-          </li>
-        ))}
-      </ul>
+      <TodoList todos={todos} onToggle={toggleTodo} onDelete={deleteTodo} />
     </div>
   );
 }

src/newtodoform.jsx

@@ -1,20 +1,32 @@
-export function NewTodoForm() {
-    return(
+import { useState } from "react";
 
+export function NewTodoForm({ onSubmit }) {
+  const [newItem, setNewItem] = useState("");
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    const title = newItem.trim();
+    if (!title) return;
+
+    onSubmit(title);
+    setNewItem("");
+  }
+
+  return (
     <form onSubmit={handleSubmit} className="new-item-form">
-        <label className="title">New Todos</label>
+      <label className="title">New Todos</label>
 
-        <input
-          value={newItem}
-          onChange={(e) => setNewItem(e.target.value)}
-          type="text"
-          id="Item"
-          className="input"
-        />
+      <input
+        value={newItem}
+        onChange={(e) => setNewItem(e.target.value)}
+        type="text"
+        id="Item"
+        className="input"
+      />
 
-        <button type="submit" className="btn add">
-          Add
-        </button>
-      </form>
-    )
+      <button type="submit" className="btn add">
+        Add
+      </button>
+    </form>
+  );
 }

src/todoitem.jsx

@@ -0,0 +1,18 @@
+export function TodoItem({ todo, onToggle, onDelete }) {
+  return (
+    <li className="todo">
+      <label>
+        <input
+          type="checkbox"
+          checked={todo.completed}
+          onChange={(e) => onToggle(todo.id, e.target.checked)}
+        />
+        {todo.title}
+      </label>
+
+      <button className="btn delete" onClick={() => onDelete(todo.id)} type="button">
+        Delete
+      </button>
+    </li>
+  );
+}

src/todolist.jsx

@@ -0,0 +1,26 @@
+export function TodoList({ todos, onToggle, onDelete }) {
+  return (
+    <ul className="list">
+      {todos.map((todo) => (
+        <li key={todo.id} className="todo">
+          <label>
+            <input
+              type="checkbox"
+              checked={todo.completed}
+              onChange={(e) => onToggle(todo.id, e.target.checked)}
+            />
+            {todo.title}
+          </label>
+
+          <button
+            className="btn delete"
+            onClick={() => onDelete(todo.id)}
+            type="button"
+          >
+            Delete
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}