From 487895ad2288afe75dc63985cc690c8994a27c48 Mon Sep 17 00:00:00 2001
From: Bimisola Daniel <bimisoladaniel@Bimisolas-MacBook-Air.local[credential]>
Date: Tue, 3 Aug 2021 07:00:49 +0100
Subject: [PATCH 1/5] I'm still working

---
 package-lock.json | 123 +++++++++++++---------------------------------
 src/App.js        |  26 +++++++++-
 2 files changed, 58 insertions(+), 91 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a86dbc13..b73187de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6864,8 +6864,7 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -6883,13 +6882,11 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -6902,18 +6899,15 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -7016,8 +7010,7 @@
             },
             "inherits": {
               "version": "2.0.4",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "ini": {
               "version": "1.3.5",
@@ -7027,7 +7020,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -7040,20 +7032,17 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -7070,7 +7059,6 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -7151,8 +7139,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -7162,7 +7149,6 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -7238,8 +7224,7 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -7269,7 +7254,6 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -7287,7 +7271,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -7326,13 +7309,11 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "yallist": {
               "version": "3.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             }
           }
         }
@@ -12889,8 +12870,7 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -12908,13 +12888,11 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -12927,18 +12905,15 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -13041,8 +13016,7 @@
             },
             "inherits": {
               "version": "2.0.4",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "ini": {
               "version": "1.3.5",
@@ -13052,7 +13026,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -13065,20 +13038,17 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -13095,7 +13065,6 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -13176,8 +13145,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -13187,7 +13155,6 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -13263,8 +13230,7 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -13294,7 +13260,6 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -13312,7 +13277,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -13351,13 +13315,11 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "yallist": {
               "version": "3.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             }
           }
         },
@@ -13671,8 +13633,7 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -13690,13 +13651,11 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -13709,18 +13668,15 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -13823,8 +13779,7 @@
             },
             "inherits": {
               "version": "2.0.4",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "ini": {
               "version": "1.3.5",
@@ -13834,7 +13789,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -13847,20 +13801,17 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -13877,7 +13828,6 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -13958,8 +13908,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -13969,7 +13918,6 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -14045,8 +13993,7 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -14076,7 +14023,6 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -14094,7 +14040,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -14133,13 +14078,11 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "yallist": {
               "version": "3.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             }
           }
         },
diff --git a/src/App.js b/src/App.js
index 556b5fbc..2b251888 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,37 @@
 import React from 'react';
 
+
+
+const data = [
+  {
+    task: 'Organize Garage',
+    id: 1528817077286,
+    completed: false
+  },
+  {
+    task: 'Bake Cookies',
+    id: 1528817084358,
+    completed: false
+  }
+];
 class App extends React.Component {
+  constructor() {
+    super();
+  const App= {}={ 
+    const [state, setState] = useState({
+
+    })
+    
+    }
+  }
+  
   // you will need a place to store your state in this component.
   // design `App` to be the parent component of your application.
   // this component is going to take care of state, and any change handlers you need to work with your state
   render() {
     return (
       <div>
-        <h2>Welcome to your Todo App!</h2>
+        <h2>Todo List: MVP</h2>
       </div>
     );
   }

From 92875d29313498143ef0af1e10408354c18cd5f2 Mon Sep 17 00:00:00 2001
From: Bimisola Daniel <bimisoladaniel@Bimisolas-MacBook-Air.local[credential]>
Date: Tue, 3 Aug 2021 17:05:58 +0100
Subject: [PATCH 2/5] I'm making progress

---
 src/App.js                 | 28 +++++++++++-----------------
 src/components/Todo.js     | 34 ++++++++++++++++++++++++++++++++++
 src/components/TodoList.js | 13 +++++++++++++
 src/index.js               |  8 ++++----
 4 files changed, 62 insertions(+), 21 deletions(-)

diff --git a/src/App.js b/src/App.js
index 2b251888..623df781 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,40 +1,34 @@
-import React from 'react';
+import React from "react";
+import ReactDOM from "react-dom";
+import Todo from "./components/Todo";
 
-
-
-const data = [
+const todo = [
   {
-    task: 'Organize Garage',
+    task: "Organize Garage",
     id: 1528817077286,
     completed: false
   },
   {
-    task: 'Bake Cookies',
+    task: "Bake Cookies",
     id: 1528817084358,
     completed: false
   }
 ];
+
 class App extends React.Component {
   constructor() {
     super();
-  const App= {}={ 
-    const [state, setState] = useState({
-
-    })
-    
-    }
+    this.state = {
+      todo: todo
+    };
   }
-  
-  // you will need a place to store your state in this component.
-  // design `App` to be the parent component of your application.
-  // this component is going to take care of state, and any change handlers you need to work with your state
   render() {
     return (
       <div>
         <h2>Todo List: MVP</h2>
+        <Todo todo={todo} />
       </div>
     );
   }
 }
-
 export default App;
diff --git a/src/components/Todo.js b/src/components/Todo.js
index e69de29b..69754e55 100644
--- a/src/components/Todo.js
+++ b/src/components/Todo.js
@@ -0,0 +1,34 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+class Todo extends React.Component {
+  constructor() {
+    super();
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div>
+        <p>Learn setState()</p>
+        <form>
+          <input
+            type="Text"
+            name="form"
+            id="special-text"
+            onChange={() => {}}
+          />
+          <button>Add</button>
+        </form>
+      </div>
+    );
+  }
+}
+/*<input
+            type="Text"
+            name="additions"
+            id="special-text"
+            onChange={() => {}}
+          />
+          <label htmlFor="additions">Anything else you's like to add?</label>*/
+export default Todo;
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
index dfd3d8f1..633b188b 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoList.js
@@ -1,2 +1,15 @@
 // your components will all go in this `component` directory.
 // feel free to change this component.js into TodoList.js
+
+import React from "react";
+import Todo from "./Todo";
+
+const TodoList = props => {
+  return (
+    <div className={`TodoList ${props.TodoList.completed ? " completed" : ""}`}>
+      <p>{props.todo.task}</p>
+    </div>
+  );
+};
+
+export default TodoList;
diff --git a/src/index.js b/src/index.js
index b597a442..c24e9d80 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));

From f3f5e9612f24b7fc274a83ef9266b88206a987c4 Mon Sep 17 00:00:00 2001
From: Bimisola Daniel <bimisoladaniel@Bimisolas-MacBook-Air.local[credential]>
Date: Wed, 4 Aug 2021 14:43:17 +0100
Subject: [PATCH 3/5] still trying to get it

---
 src/App.js                 |  8 +++++---
 src/components/Todo.js     |  3 ++-
 src/components/TodoList.js | 19 ++++++++++++++++---
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/App.js b/src/App.js
index 623df781..1b30527a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import Todo from "./components/Todo";
+import TodoList from "./components/TodoList";
 
-const todo = [
+const todos = [
   {
     task: "Organize Garage",
     id: 1528817077286,
@@ -19,14 +20,15 @@ class App extends React.Component {
   constructor() {
     super();
     this.state = {
-      todo: todo
+      todos: todos
     };
   }
+
   render() {
     return (
       <div>
         <h2>Todo List: MVP</h2>
-        <Todo todo={todo} />
+        <TodoList todos={this.state.todos} />
       </div>
     );
   }
diff --git a/src/components/Todo.js b/src/components/Todo.js
index 69754e55..958fc9b3 100644
--- a/src/components/Todo.js
+++ b/src/components/Todo.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { render } from "@testing-library/react";
 
 class Todo extends React.Component {
@@ -11,6 +11,7 @@ class Todo extends React.Component {
     return (
       <div>
         <p>Learn setState()</p>
+        <p>Style my Todo List</p>
         <form>
           <input
             type="Text"
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
index 633b188b..a9fc8b53 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoList.js
@@ -1,13 +1,26 @@
 // your components will all go in this `component` directory.
 // feel free to change this component.js into TodoList.js
 
-import React from "react";
+import React, { useState } from "react";
 import Todo from "./Todo";
 
 const TodoList = props => {
+  const [todo, setTodo] = useState({
+    task: "Organize Garage",
+    id: 1528817077286,
+    completed: false
+  });
+
+  const handleClick = () => {
+    setTodo({
+      ...todo,
+      purchased: true
+    });
+  };
+
   return (
-    <div className={`TodoList ${props.TodoList.completed ? " completed" : ""}`}>
-      <p>{props.todo.task}</p>
+    <div className={`TodoList ${props.todos.completed ? " completed" : ""}`}>
+      <p>{props.todos.task}</p>
     </div>
   );
 };

From 4ffbbdbc7fb75871e7ed06ded637a51a3130bd30 Mon Sep 17 00:00:00 2001
From: Bimisola Daniel <bimisoladaniel@Bimisolas-MacBook-Air.local[credential]>
Date: Thu, 5 Aug 2021 07:22:06 +0100
Subject: [PATCH 4/5] so much progress

---
 src/App.js                 | 30 ++++++++++++++----------------
 src/components/Todo.js     | 38 +++++++-------------------------------
 src/components/TodoForm.js | 32 ++++++++++++++++++++++++++++++++
 src/components/TodoList.js | 30 +++++++-----------------------
 4 files changed, 60 insertions(+), 70 deletions(-)

diff --git a/src/App.js b/src/App.js
index 1b30527a..62033f06 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,26 +1,23 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import Todo from "./components/Todo";
 import TodoList from "./components/TodoList";
-
-const todos = [
-  {
-    task: "Organize Garage",
-    id: 1528817077286,
-    completed: false
-  },
-  {
-    task: "Bake Cookies",
-    id: 1528817084358,
-    completed: false
-  }
-];
+import TodoForm from "./components/TodoForm";
 
 class App extends React.Component {
   constructor() {
     super();
     this.state = {
-      todos: todos
+      todos: [
+        {
+          task: "Organize Garage",
+          id: 1528817077286,
+          completed: false
+        },
+        {
+          task: "Bake Cookies",
+          id: 1528817084358,
+          completed: false
+        }
+      ]
     };
   }
 
@@ -29,6 +26,7 @@ class App extends React.Component {
       <div>
         <h2>Todo List: MVP</h2>
         <TodoList todos={this.state.todos} />
+        <TodoForm />
       </div>
     );
   }
diff --git a/src/components/Todo.js b/src/components/Todo.js
index 958fc9b3..1a179e61 100644
--- a/src/components/Todo.js
+++ b/src/components/Todo.js
@@ -1,35 +1,11 @@
 import React, { useState } from "react";
-import { render } from "@testing-library/react";
 
-class Todo extends React.Component {
-  constructor() {
-    super();
-    this.state = {};
-  }
-
-  render() {
-    return (
-      <div>
-        <p>Learn setState()</p>
-        <p>Style my Todo List</p>
-        <form>
-          <input
-            type="Text"
-            name="form"
-            id="special-text"
-            onChange={() => {}}
-          />
-          <button>Add</button>
-        </form>
-      </div>
-    );
-  }
+function Todo(props) {
+  return (
+    <div>
+      <p>{props.todo.task}</p>
+    </div>
+  );
 }
-/*<input
-            type="Text"
-            name="additions"
-            id="special-text"
-            onChange={() => {}}
-          />
-          <label htmlFor="additions">Anything else you's like to add?</label>*/
+
 export default Todo;
diff --git a/src/components/TodoForm.js b/src/components/TodoForm.js
index e69de29b..9c49a57b 100644
--- a/src/components/TodoForm.js
+++ b/src/components/TodoForm.js
@@ -0,0 +1,32 @@
+import React, { Component } from "react";
+
+export default class TodoForm extends Component {
+  constructor() {
+    super();
+    this.state = {
+      todoText: "text"
+    };
+  }
+
+  handleChanges = e => {
+    const { name, value } = e.target;
+    this.setState({
+      [name]: value
+    });
+  };
+  render() {
+    return (
+      <div>
+        <form>
+          <label htmlFor="todo-input">Add Todo: </label>
+          <input
+            id="todo-input"
+            name="todoText"
+            value={this.state.todoText}
+            onChange={this.handleChanges}
+          />
+        </form>
+      </div>
+    );
+  }
+}
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
index a9fc8b53..70b2f9a2 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoList.js
@@ -1,28 +1,12 @@
-// your components will all go in this `component` directory.
-// feel free to change this component.js into TodoList.js
-
-import React, { useState } from "react";
+import React from "react";
 import Todo from "./Todo";
 
-const TodoList = props => {
-  const [todo, setTodo] = useState({
-    task: "Organize Garage",
-    id: 1528817077286,
-    completed: false
-  });
-
-  const handleClick = () => {
-    setTodo({
-      ...todo,
-      purchased: true
-    });
-  };
-
+export default function TodoList(props) {
   return (
-    <div className={`TodoList ${props.todos.completed ? " completed" : ""}`}>
-      <p>{props.todos.task}</p>
+    <div>
+      {props.todos.map(todo => (
+        <Todo key={todo.id} todo={todo} />
+      ))}
     </div>
   );
-};
-
-export default TodoList;
+}

From 06528d515aecf6c00a737091815f239ee215222d Mon Sep 17 00:00:00 2001
From: Bimisola Daniel <bimisoladaniel@Bimisolas-MacBook-Air.local[credential]>
Date: Thu, 5 Aug 2021 15:11:18 +0100
Subject: [PATCH 5/5] gonna perfect it

---
 src/App.js                 | 32 ++++++++++++++++++++++++++++++--
 src/components/Todo.js     |  7 ++++++-
 src/components/TodoForm.js | 13 +++++++++++--
 src/components/TodoList.js |  2 +-
 src/index.js               |  2 +-
 5 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/src/App.js b/src/App.js
index 62033f06..589f9dad 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,12 +21,40 @@ class App extends React.Component {
     };
   }
 
+  addItem = taskName => {
+    const newTodo = {
+      task: taskName,
+      id: new Date(),
+      completed: false
+    };
+    this.setState({
+      todos: [...this.state.todos, newTodo]
+    });
+  };
+
+  toggleCompleted = id => {
+    this.setState({
+      todos: this.set.todos.map(todo => {
+        if (todo.id === id) {
+          return {
+            ...todo,
+            completed: !todo.completed
+          };
+        } else {
+          return todo;
+        }
+      })
+    });
+  };
   render() {
     return (
       <div>
         <h2>Todo List: MVP</h2>
-        <TodoList todos={this.state.todos} />
-        <TodoForm />
+        <TodoList
+          todos={this.state.todos}
+          toggleCompleted={this.toggleCompleted}
+        />
+        <TodoForm addItem={this.addItem} />
       </div>
     );
   }
diff --git a/src/components/Todo.js b/src/components/Todo.js
index 1a179e61..cec93604 100644
--- a/src/components/Todo.js
+++ b/src/components/Todo.js
@@ -3,7 +3,12 @@ import React, { useState } from "react";
 function Todo(props) {
   return (
     <div>
-      <p>{props.todo.task}</p>
+      <p
+        style={{ textDecoration: props.todo.completed ? "line-through" : null }}
+        onClick={() => props.toggleCompleted(props.todo.id)}
+      >
+        {props.todo.task}
+      </p>
     </div>
   );
 }
diff --git a/src/components/TodoForm.js b/src/components/TodoForm.js
index 9c49a57b..1d26a299 100644
--- a/src/components/TodoForm.js
+++ b/src/components/TodoForm.js
@@ -4,7 +4,7 @@ export default class TodoForm extends Component {
   constructor() {
     super();
     this.state = {
-      todoText: "text"
+      todoText: ""
     };
   }
 
@@ -14,10 +14,18 @@ export default class TodoForm extends Component {
       [name]: value
     });
   };
+
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.addItem(this.state.todoText);
+    this.setState({
+      todoText: ""
+    });
+  };
   render() {
     return (
       <div>
-        <form>
+        <form onSubmit={this.handleSubmit}>
           <label htmlFor="todo-input">Add Todo: </label>
           <input
             id="todo-input"
@@ -25,6 +33,7 @@ export default class TodoForm extends Component {
             value={this.state.todoText}
             onChange={this.handleChanges}
           />
+          <button>Add Todo</button>
         </form>
       </div>
     );
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
index 70b2f9a2..b2a9c8e3 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoList.js
@@ -5,7 +5,7 @@ export default function TodoList(props) {
   return (
     <div>
       {props.todos.map(todo => (
-        <Todo key={todo.id} todo={todo} />
+        <Todo key={todo.id} todo={todo} toggleItem={props.Completed} />
       ))}
     </div>
   );
diff --git a/src/index.js b/src/index.js
index c24e9d80..466f4017 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,4 +2,4 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ ReactDOM.render(<App />, document.getElementById("root"));