From 78d6a452ed48a5b25e60f9007940ad185c92b41c Mon Sep 17 00:00:00 2001
From: bee98 <43488353+bee98@users.noreply.github.com>
Date: Tue, 31 Mar 2020 09:07:58 +0700
Subject: [PATCH 1/4] Update App.js

---
 src/App.js | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 92 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index 93d4b5e..900e5d8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,16 +3,105 @@ import ToDoListItem from "./ToDoListItem.js"
 import './App.css';
 
 class App extends Component {
+    
+  constructor() {
+    super();
+    this.state = {
+      toDoList: [
+        {
+          title: "Me",
+          description: "Stay at home"
+        },
+        {
+          title: "You",
+          description: "Stay at home"
+        },
+      ],
+      item: {
+          title: '',
+          description: '',
+      },
+    }
+  }    
+  
+  handleTitleEdit(e) {
+    this.state.item.title = e.target.value;
+    this.setState({item: this.state.item});
+  }
+  
+  handleDesEdit(e) {
+    this.state.item.description = e.target.value;
+    this.setState({item: this.state.item});
+  }
+  
+  handleAddItem() {
+    this.state.toDoList.push(this.state.item);
+  }
+  
+  handleDeleteItem(index) {
+    this.state.toDoList.splice(index, 1);
+    this.setState({toDoList: this.state.toDoList});
+  }
+  
+  handleSubmit(e) {
+    this.handleAddItem();
+    e.preventDefault();
+    this.setState({
+        item: {
+            title: '',
+            description: ''
+        }
+    })
+  }
+    
   render() {
+      
+    const items = this.state.toDoList.map((item,index) => {
+        return (
+            <ToDoListItem
+                key = {index}
+                title = {item.title}
+                description = {item.description}
+                handleDelete = {()=>this.handleDeleteItem(index)}
+            />
+        )
+    });
+        
+      
     return (
       <div className="App">
+        
+        <div>
+          <form className="App-form" onSubmit={(e)=>this.handleSubmit(e)}>
+            <input 
+              id="title"    
+              type="text"
+              value={this.state.item.title}
+              onChange={(e)=>this.handleTitleEdit(e)}
+              placeholder="Title"
+              required
+            />
+            <textarea
+              id="des"
+              value={this.state.item.description}
+              onChange={(e)=>this.handleDesEdit(e)}
+              placeholder="Description"
+            />
+            <button type="submit"
+              onClick={(e)=>this.handleSubmit(e)}
+            >
+             Add
+            </button>
+          </form>
+        </div>
+        
         <div>
-          <ToDoListItem
-          />
+          {items}
         </div>
+        
       </div>
     );
   }
 }
 
-export default App;
\ No newline at end of file
+export default App;

From 079763c228e1ef07fc17f24453d52f1d6aa1fa0f Mon Sep 17 00:00:00 2001
From: bee98 <43488353+bee98@users.noreply.github.com>
Date: Tue, 31 Mar 2020 09:09:54 +0700
Subject: [PATCH 2/4] Update ToDoListItem.js

---
 src/ToDoListItem.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/ToDoListItem.js b/src/ToDoListItem.js
index 5af7931..984e2d1 100644
--- a/src/ToDoListItem.js
+++ b/src/ToDoListItem.js
@@ -3,13 +3,18 @@ import './ToDoListItem.css';
 
 class ToDoListItem extends Component {
   render() {
+    const{
+        title,
+        description,
+        handleDelete,
+    } = this.props ;
     return (
-      <div className="ToDoListItem">
-        <div className="ToDoListItem-title"></div>
-        <div className="ToDoListItem-description"></div>
+      <div className="ToDoListItem" onClick={handleDelete}>
+        <div className="ToDoListItem-title">{title}</div>
+        <div className="ToDoListItem-description">{description}</div>
       </div>
     );
   }
 }
 
-export default ToDoListItem;
\ No newline at end of file
+export default ToDoListItem;

From 98f49f5e0494cd66f67cc0a272fbfd2e7fe529b5 Mon Sep 17 00:00:00 2001
From: bee98 <43488353+bee98@users.noreply.github.com>
Date: Tue, 31 Mar 2020 09:15:27 +0700
Subject: [PATCH 3/4] Update App.js

---
 src/App.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index 900e5d8..f4e45f5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -43,7 +43,7 @@ class App extends Component {
     this.setState({toDoList: this.state.toDoList});
   }
   
-  handleSubmit(e) {
+  onSubmit(e) {
     this.handleAddItem();
     e.preventDefault();
     this.setState({
@@ -88,7 +88,7 @@ class App extends Component {
               placeholder="Description"
             />
             <button type="submit"
-              onClick={(e)=>this.handleSubmit(e)}
+              onClick={(e)=>this.onSubmit(e)}
             >
              Add
             </button>

From 37ac04502b1c17978f03313873c1ba522f5f0064 Mon Sep 17 00:00:00 2001
From: bee98 <43488353+bee98@users.noreply.github.com>
Date: Tue, 31 Mar 2020 09:23:36 +0700
Subject: [PATCH 4/4] Update App.js

---
 src/App.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/App.js b/src/App.js
index f4e45f5..5b27658 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,6 +22,11 @@ class App extends Component {
           description: '',
       },
     }
+    this.handleTitleEdit = this.handleTitleEdit.bind(this);
+    this.handleDesEdit = this.handleDesEdit.bind(this);
+    this.handleAddItem = this.handleAddItem.bind(this);
+    this.handleDeleteItem = this.handleDeleteItem.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
   }    
   
   handleTitleEdit(e) {