comments added

src/App.js

@@ -1,10 +1,14 @@
+// importing useState from React
 import { useState } from 'react'
+// importing Header, list and AddTodo components 
 import Header from "./components/Header";
 import List from "./components/List"
 import AddTodo from "./components/AddTodo"
 
+// creating a function component
 function App() {
 
+  // destructing varibles to set and change the state which has an array of todo item objects
   const [todos, setTodos] = useState([
     {
       id: 1,
@@ -20,16 +24,20 @@ function App() {
     },
   ]);
 
+  // creating a new todo handler function to change the current state using setTodos
   const addTodo = (todo) => {
     const id = Math.ceil(Math.random()*100000)
     const newTodo = {id, ...todo}
     setTodos([...todos, newTodo])
   }
-
+// the App component returns a div element with a Header, AddTodo and List components
   return (
     <div className="container">
+    {/* header component with props */}
       <Header title="Todo List" />
+      {/* AddTodo component with an onAdd event prop and addTodo handler function being passed to the child component*/}
       <AddTodo onAdd={addTodo} />
+      {/* List component with useState todos props being passed to the child component */}
       <List todos={todos}/>
     </div>
   );

src/components/AddTodo.js

@@ -1,22 +1,31 @@
+// importing useState hook and React
 import { useState } from 'react'
 
+// Creating AddTodo function component, its receiving onADD props from the top level 
 const AddTodo = ({ onAdd }) => { 
+    // Setting new state to for items and destructuring it into variables
     const [item, setItem] = useState('')
 
+    // creating an onSubmit handler function
     const onSubmit = (e) => {
+        // preventDefault stops/cancels the default action, meaning a specific event will not occur
         e.preventDefault()
+        // the onAdd event handler function adds the new item 
         onAdd({item})
-
+        // we changing the state of the item back to empty
         setItem('')
     }
-
+// the component returns a form element with an input an submit button
     return (
+        // setting onSubmit event to onSubmit event handler as action
         <form onSubmit={onSubmit}>
             <label>Add Todo:</label>
             <input 
                 type="text" 
                 placeholder="Todo Item"
+                //adding the item as the input value to store new items being added into the items array
                 value={item}
+                // onChange event that sets the items value to the current value
                 onChange={ (e) => setItem(e.target.value)}
             /> 
             <input type="submit" value="Add Todo" />

src/components/Header.js

@@ -1,13 +1,17 @@
+// importing React
 import React from "react";
 
+// creating a Header function component with props
 const Header = (props) => {
+  // returns a div and h1, h1 element gets the styles from the HeaderStyle object as props and its the title is recevied from the top level
   return (
     <div>
       <h1 style={headerStyle}>{props.title}</h1>
     </div>
   );
 };
 
+// We create a new style object for the Header component
 const headerStyle = {
   fontSize: "40px",
   textDecoration: "underline",

src/components/List.js

@@ -1,9 +1,13 @@
+// we import the todo component to add to the list component
 import Todo from './Todo'
 
+// create LIst function component that takes in an object "todos" as props
 const List = ({ todos }) => {
     return (
         <div>
+        {/* we map through the todos to create new todo items and add the to our Todo component */}
           {todos.map((todo) => 
+          {/* we grab the todo item id's and pass it as key for each todo item and the todo item itself, which gets rendered on the webpage */}
             <Todo key={todo.id} todo={todo} />
           )}  
         </div>

src/components/Todo.js

@@ -1,7 +1,8 @@
-
+// creating a Todo funciton component that is receing "todo object" as props from the top level (APP)
 const Todo = ({ todo }) => {
     return (
         <div>
+        {/* receiving todo items from the todo object in props */}
             <h2>{todo.item}</h2>
         </div>
     )

src/index.js

@@ -1,9 +1,11 @@
+// importing React and react dom 
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+// ReactDOM.render is a React method to render a react app to the web page, it controls the contents of the container node we pass in to update the properties of an exisiting component.
 ReactDOM.render(
   <React.StrictMode>
     <App />