Hook up delete button to remove contacts

Author: tylermcginnis

src/App.js

@@ -24,10 +24,20 @@ class App extends Component {
       },
     ]
   }
+  removeContact = (contact) => {
+    this.setState((currentState) => ({
+      contacts: currentState.contacts.filter((c) => {
+        return c.id !== contact.id
+      })
+    }))
+  }
   render() {
     return (
       <div>
-        <ListContacts contacts={this.state.contacts} />
+        <ListContacts
+          contacts={this.state.contacts}
+          onDeleteContact={this.removeContact}
+        />
       </div>
     )
   }

src/ListContacts.js

@@ -15,8 +15,10 @@ function ListContacts (props) {
             <p>{contact.name}</p>
             <p>{contact.handle}</p>
           </div>
-          <button className='contact-remove'>
-            Remove
+          <button
+            onClick={() => props.onDeleteContact(contact)}
+            className='contact-remove'>
+              Remove
           </button>
         </li>
       ))}