delete tasks

src/App.js

@@ -14,6 +14,7 @@ class App extends React.Component {
     this.handleChange = this.handleChange.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
     this.addTask = this.addTask.bind(this)
+    this.deleteTask = this.deleteTask.bind(this)
   }
 
   fetchData() {
@@ -33,7 +34,7 @@ class App extends React.Component {
 
   handleChange(e) {
     this.setState( { [e.target.name]: e.target.value })
-    console.log( this.state )
+    //console.log( this.state )
   }
   handleSubmit(e) {
     e.preventDefault()
@@ -43,8 +44,10 @@ class App extends React.Component {
 
   addTask(e) {
     e.preventDefault()
-    console.log("Added task: ", e.target.value)
-    this.setState( { tasks: this.state.tasks.concat(this.state.newTask) })
+    this.setState( { tasks: this.state.tasks.concat(this.state.newTask), newTask: '' })
+  }
+  deleteTask(task) {
+   this.setState( { tasks: this.state.tasks.filter(t => t !== task) })
   }
 
 
@@ -59,7 +62,7 @@ class App extends React.Component {
   }
   renderTasks(filtered) {
     // {...this.state} passes everything on state to the component
-    return <Tasks handleChange={this.handleChange} addTask={this.addTask} filtered={filtered} {...this.state} />
+    return <Tasks handleChange={this.handleChange} addTask={this.addTask} deleteTask={this.deleteTask} filtered={filtered} {...this.state} />
   }
   render() {
 

src/components/tasks.js

@@ -7,10 +7,12 @@ function Tasks(props) {
     <div>
       <h1>{`Hello, ${props.user.name}!`}</h1>
       <p>Your tasks:</p>
-      <ul>{filtered.map(task => <li key={task}>{task}</li> )}</ul>
-      <form>New:
-          <input name="newTask" value={props.newTask} onChange={ props.handleChange } />
-          <button type="submit" onClick={ props.addTask }>Add!!!</button>
+      <ul className="list-group">{filtered.map(task =>
+        <li className="list-group-item" key={task} onClick={ props.editTask }>
+        <button className="btn btn-outline-danger" onClick={ () => props.deleteTask(task) }>X</button> {task}</li> )}</ul>
+      <form className="mt-2">
+          <button className="btn btn-dark" type="submit" onClick={ props.addTask }>Add</button>
+          <input className="ml-1" name="newTask" value={props.newTask} onChange={ props.handleChange } />
       </form>
     </div>
   )