diff --git a/public/index.html b/public/index.html
index aa069f2..fc824ae 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,3 +1,7 @@
+
+
+
diff --git a/src/App.js b/src/App.js
index af6b858..30a77a8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,12 @@
+// imports useState functionality, Header,AddToDo and List components
import { useState } from 'react'
import Header from "./components/Header";
import List from "./components/List"
import AddTodo from "./components/AddTodo"
+//main app function to generate the components which are rendered in the root div in the index.html file
function App() {
-
+// setting the initial state of the toDos to the array of todo objects
const [todos, setTodos] = useState([
{
id: 1,
@@ -19,13 +21,13 @@ function App() {
item: "Exercise",
},
]);
-
+//when a new to do is made an id is generated for the id, this is then passed into the set state which updates the setstate array to add the new todo to the existing ones
const addTodo = (todo) => {
const id = Math.ceil(Math.random()*100000)
const newTodo = {id, ...todo}
setTodos([...todos, newTodo])
}
-
+//genereates the html thats rendered into the html by using the components imported at the top of the page to dynamically generate the html required based on the todos we have
return (
@@ -34,5 +36,5 @@ function App() {
);
}
-
+// maves the App function available throughout the app througgh the use of import in other files
export default App;
diff --git a/src/components/AddTodo.js b/src/components/AddTodo.js
index 5d7ee18..5b88a60 100644
--- a/src/components/AddTodo.js
+++ b/src/components/AddTodo.js
@@ -1,27 +1,34 @@
+// imports useState to be used in this file
import { useState } from 'react'
+// declares AddToDo and passes in onAdd as props
const AddTodo = ({ onAdd }) => {
+ //sets up useState with state of item and a setItem method
const [item, setItem] = useState('')
+ //creates a function to handle the submission of the form, prevents default behaviour, passes the item state to onAdd function then sets item state to ''
const onSubmit = (e) => {
e.preventDefault()
onAdd({item})
setItem('')
}
-
+ //renders the form component
return (
+ // passes in onSubmit function
)
}
-
+//makes component available to use in the react app
export default AddTodo
diff --git a/src/components/Header.js b/src/components/Header.js
index 50c5b33..e5e6982 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,16 +1,18 @@
+//import react module
import React from "react";
-
+// write function to render the Header component, passing in props as a parameter
const Header = (props) => {
return (
+ // style is set ussing jsx from the style object below, and the text of the h1 is set to the title property from the props parameter
{props.title}
);
};
-
+//styling object for the header style
const headerStyle = {
fontSize: "40px",
textDecoration: "underline",
};
-
+//makes component available to be used in the app
export default Header;
diff --git a/src/components/List.js b/src/components/List.js
index 4274891..70a6259 100644
--- a/src/components/List.js
+++ b/src/components/List.js
@@ -1,14 +1,18 @@
+// imports todo component
import Todo from './Todo'
+//create fn to render the list div component and passes todos in as props
const List = ({ todos }) => {
return (
+ //using jsx to map through the todos to render a todo component for each todo in the todos arr of obj passed in
{todos.map((todo) =>
+ //key is set as todo id and the todo prop is set to the todo
)}
)
}
-
+//maked the list component available for use elsewhere
export default List
diff --git a/src/components/Todo.js b/src/components/Todo.js
index c4c8f6d..4e2abc1 100644
--- a/src/components/Todo.js
+++ b/src/components/Todo.js
@@ -1,11 +1,12 @@
-
+//function to render the Todo component div, passed todo as a prop
const Todo = ({ todo }) => {
return (
+ //using the prop property to set the text of the h2
{todo.item}
)
}
-
+// ennable the use of the todo component in other files
export default Todo
diff --git a/src/index.css b/src/index.css
index cf3f0db..80ba7c4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,4 +15,5 @@ code {
#root{
display: flex;
justify-content: space-around;
-}
\ No newline at end of file
+}
+/* adding css declarations to style the app at a base level */
diff --git a/src/index.js b/src/index.js
index ef2edf8..3f2f8c7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,16 @@
+//importing modules for use in this file, styles main App file and the reportWebVitals file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
+//renders the App component
ReactDOM.render(
,
+ //target the default root div where the app will be rendered into
document.getElementById('root')
);
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
index 5253d3a..9c05ab2 100644
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
@@ -11,3 +11,4 @@ const reportWebVitals = onPerfEntry => {
};
export default reportWebVitals;
+//default file in the creat-react-app informs users about perf test results, and is made available throughout the app throught the export default