From 6e2d27427a7b4cf36a66ff2f30593e0eddb34345 Mon Sep 17 00:00:00 2001 From: Jonathan Yau Date: Mon, 7 Jun 2021 15:12:30 -0700 Subject: [PATCH 1/6] added comments --- src/App.js | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/App.js b/src/App.js index af6b858..45fe0f0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,11 @@ -import { useState } from 'react' -import Header from "./components/Header"; -import List from "./components/List" -import AddTodo from "./components/AddTodo" +import { useState } from 'react' //import useState object from react +import Header from "./components/Header"; //import Header component +import List from "./components/List" //import List component +import AddTodo from "./components/AddTodo" //import AddToDo Component -function App() { +function App() { //App component that will render in 'root' element in DOM - const [todos, setTodos] = useState([ + const [todos, setTodos] = useState([ //the todos array is the original value used in useState, setTodos function will update the array { id: 1, item: "Drink Water", @@ -20,19 +20,21 @@ function App() { }, ]); - const addTodo = (todo) => { - const id = Math.ceil(Math.random()*100000) - const newTodo = {id, ...todo} - setTodos([...todos, newTodo]) + const addTodo = (todo) => { //create addTodo function + const id = Math.ceil(Math.random()*100000) //create a random number ID + const newTodo = {id, ...todo} // create newTodo with id and passed in todo parameter + setTodos([...todos, newTodo]) // function that will return a new array with original content plus added } return (
- + + //^ AddTodo component with property of above function + //^ List todos component with property of above original state
); } -export default App; +export default App; //export App From 5e704a3cc8d8c4ba3dea0e13a09267f7e9776c00 Mon Sep 17 00:00:00 2001 From: Jonathan Yau Date: Mon, 7 Jun 2021 15:25:08 -0700 Subject: [PATCH 2/6] added comments --- src/components/AddTodo.js | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/AddTodo.js b/src/components/AddTodo.js index 5d7ee18..aa2a6f7 100644 --- a/src/components/AddTodo.js +++ b/src/components/AddTodo.js @@ -1,27 +1,29 @@ -import { useState } from 'react' +import { useState } from 'react' // import useState object of react -const AddTodo = ({ onAdd }) => { - const [item, setItem] = useState('') +const AddTodo = ({ onAdd }) => { //AddTodo component with onAdd parameter + const [item, setItem] = useState('') //array destructuring. item currently set to ''. setItem to update item - const onSubmit = (e) => { - e.preventDefault() - onAdd({item}) + const onSubmit = (e) => { //onSubmit event listener + e.preventDefault() //stops page from reloading + onAdd({item}) //item parameter into onAdd - setItem('') + setItem('') //'' on submit } return (
+ //^ call onSubmit when submitted setItem(e.target.value)} + value={item} //from line 4 + onChange={ (e) => setItem(e.target.value)} //setItem to input value />
) } -export default AddTodo +export default AddTodo //export AddTodo component From 8a7ca8f7285f91d249ecc08c1f37ed6fdc10f35c Mon Sep 17 00:00:00 2001 From: Jonathan Yau Date: Mon, 7 Jun 2021 15:31:29 -0700 Subject: [PATCH 3/6] added comments --- src/components/Header.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Header.js b/src/components/Header.js index 50c5b33..baa69fe 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,6 +1,6 @@ -import React from "react"; +import React from "react"; //import react -const Header = (props) => { +const Header = (props) => { //create Header component with function to take in props return (

{props.title}

@@ -8,9 +8,10 @@ const Header = (props) => { ); }; +//style for above div const headerStyle = { fontSize: "40px", textDecoration: "underline", }; -export default Header; +export default Header; //export Header component From e4e39e8b3de591ada512da3549d51940de32e96e Mon Sep 17 00:00:00 2001 From: Jonathan Yau Date: Mon, 7 Jun 2021 15:35:03 -0700 Subject: [PATCH 4/6] Update List.js --- src/components/List.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/List.js b/src/components/List.js index 4274891..df1075a 100644 --- a/src/components/List.js +++ b/src/components/List.js @@ -1,14 +1,14 @@ -import Todo from './Todo' +import Todo from './Todo' //import Todo component -const List = ({ todos }) => { +const List = ({ todos }) => { //List component with todos parameter return (
- {todos.map((todo) => - + {todos.map((todo) => //display each todo + //Todo component will have id and array of todos )}
) } -export default List +export default List //export List component From 4f3c33a64cc7584f79e2485aa05e1ac6acd3b7fc Mon Sep 17 00:00:00 2001 From: Jonathan Yau Date: Mon, 7 Jun 2021 15:35:59 -0700 Subject: [PATCH 5/6] added comments --- src/components/Todo.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Todo.js b/src/components/Todo.js index c4c8f6d..cacbaf0 100644 --- a/src/components/Todo.js +++ b/src/components/Todo.js @@ -1,11 +1,11 @@ -const Todo = ({ todo }) => { +const Todo = ({ todo }) => { //create Todo component with todo parameter return (
-

{todo.item}

+

{todo.item}

) } -export default Todo +export default Todo //export Todo component From ea600d1c208e54033cc859053fa751ac0201ab8d Mon Sep 17 00:00:00 2001 From: Jonathan Yau Date: Mon, 7 Jun 2021 15:41:54 -0700 Subject: [PATCH 6/6] added comments --- src/index.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/index.js b/src/index.js index ef2edf8..a815d3e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,14 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from 'react'; //import react +import ReactDOM from 'react-dom'; //import ReactDOM +import './index.css'; //import styling +import App from './App'; //import App +import reportWebVitals from './reportWebVitals'; //import reportWebVitals for measuring UX -ReactDOM.render( - - +ReactDOM.render( //render the DOM + //gives more detailed information on development + //App component , - document.getElementById('root') + document.getElementById('root') //App component loads into div with 'root' name ); // If you want to start measuring performance in your app, pass a function