Answer

src/App.js

@@ -1,10 +1,16 @@
+//imports useState hook
 import { useState } from 'react'
+
+//imports components
 import Header from "./components/Header";
 import List from "./components/List"
 import AddTodo from "./components/AddTodo"
 
+
+//creating your App function
 function App() {
 
+  //sets useState
   const [todos, setTodos] = useState([
     {
       id: 1,
@@ -20,12 +26,13 @@ function App() {
     },
   ]);
 
+  //creates addTodo function
   const addTodo = (todo) => {
     const id = Math.ceil(Math.random()*100000)
-    const newTodo = {id, ...todo}
-    setTodos([...todos, newTodo])
+    const newTodo = {id, ...todo} //creates new todo
+    setTodos([...todos, newTodo]) //calls setTodos to add newTodo along with pervious todos
   }
-
+ //what App.js returns
   return (
     <div className="container">
       <Header title="Todo List" />
@@ -35,4 +42,5 @@ function App() {
   );
 }
 
+// exporting App.js
 export default App;

src/components/AddTodo.js

@@ -1,15 +1,18 @@
 import { useState } from 'react'
 
+//creation of AddToDo component, passing in onAdd
 const AddTodo = ({ onAdd }) => { 
     const [item, setItem] = useState('')
 
+    //eventhandler
     const onSubmit = (e) => {
         e.preventDefault()
         onAdd({item})
 
         setItem('')
     }
 
+    //the form to add todo
     return (
         <form onSubmit={onSubmit}>
             <label>Add Todo:</label>
@@ -24,4 +27,5 @@ const AddTodo = ({ onAdd }) => {
     )
 }
 
+//exporting of AddTodo
 export default AddTodo

src/components/Header.js

@@ -1,5 +1,6 @@
 import React from "react";
 
+// header component that takes in props
 const Header = (props) => {
   return (
     <div>
@@ -8,9 +9,11 @@ const Header = (props) => {
   );
 };
 
+//styling for Header
 const headerStyle = {
   fontSize: "40px",
   textDecoration: "underline",
 };
 
+//exporting of Header
 export default Header;

src/components/List.js

@@ -1,5 +1,7 @@
+//importing Todo component
 import Todo from './Todo'
 
+//creation of List component, passing in todos
 const List = ({ todos }) => {
     return (
         <div>
@@ -10,5 +12,6 @@ const List = ({ todos }) => {
     )
 }
 
+//exporting List component
 export default List
 

src/components/Todo.js

@@ -1,11 +1,11 @@
-
+//creating of Todo component
 const Todo = ({ todo }) => {
     return (
         <div>
             <h2>{todo.item}</h2>
         </div>
     )
 }
-
+//exporting of Todo
 export default Todo