Handling Events

Author: Bikramai

Section9-React-with-TypeScript/reminders-app/src/App.tsx

@@ -17,9 +17,13 @@ function App() {
  setReminders(reminders);
  };
 
+ const removerReminder = (id: number) => {
+ setReminders(reminders.filter(reminder => reminder.id !== id))
+ }
+
  return (
  <div className="App">
- <ReminderList items={reminders} />
+ <ReminderList items={reminders} onRemoveReminder={removerReminder}/>
  </div>
  );
 }

Section9-React-with-TypeScript/reminders-app/src/components/ReminderList.tsx

@@ -1,16 +1,27 @@
-import React from 'react';
-import Reminder from '../models/reminder';
+import React from "react";
+import Reminder from "../models/reminder";
 
 interface ReminderListProps {
- items: Reminder[]
+ items: Reminder[];
+ onRemoveReminder: (id: number) => void;
 }
 
-function ReminderList({ items }: ReminderListProps) {
- return (
- <ul className='list-group'>
- {items.map(items => <li className='list-group-item' key={ items.id}>{items.title}</li>)}
- </ul>
- );
+function ReminderList({ items, onRemoveReminder }: ReminderListProps) {
+ return (
+ <ul className="list-group">
+ {items.map((items) => (
+ <li className="list-group-item" key={items.id}>
+ {items.title}
+ <button
+ onClick={() => onRemoveReminder(items.id)}
+ className="btn btn-outline-danger mx-3 rounded-pill"
+ >
+ Delete
+ </button>
+ </li>
+ ))}
+ </ul>
+ );
 }
 
-export default ReminderList;
+export default ReminderList;