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 ( <div className="container"> <Header title="Todo List" /> - <AddTodo onAdd={addTodo} /> + <AddTodo onAdd={addTodo} /> + //^ AddTodo component with property of above function <List todos={todos}/> + //^ List todos component with property of above original state </div> ); } -export default App; +export default App; //export App 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 ( <form onSubmit={onSubmit}> + //^ call onSubmit when submitted <label>Add Todo:</label> <input + //^ text field type="text" placeholder="Todo Item" - value={item} - onChange={ (e) => setItem(e.target.value)} + value={item} //from line 4 + onChange={ (e) => setItem(e.target.value)} //setItem to input value /> <input type="submit" value="Add Todo" /> </form> ) } -export default AddTodo +export default AddTodo //export AddTodo component 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 ( <div> <h1 style={headerStyle}>{props.title}</h1> @@ -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 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 ( <div> - {todos.map((todo) => - <Todo key={todo.id} todo={todo} /> + {todos.map((todo) => //display each todo + <Todo key={todo.id} todo={todo} /> //Todo component will have id and array of todos )} </div> ) } -export default List +export default List //export List component 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 ( <div> - <h2>{todo.item}</h2> + <h2>{todo.item}</h2> </div> ) } -export default Todo +export default Todo //export Todo component 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( - <React.StrictMode> - <App /> +ReactDOM.render( //render the DOM + <React.StrictMode> //gives more detailed information on development + <App /> //App component </React.StrictMode>, - 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