Hook up delete button to remove contacts

udacity · Mar 2, 2018 · 4b65612 · samehaladli · Nov 19, 2021 · mohamedhadia
1 parent d3d6eee
commit 4b65612
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/App.js b/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>
     )
   }

diff --git a/src/ListContacts.js b/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>
       ))}