Step 10

Let's add functionality to the remove button.

When we remove a meeting, it must be removed from the "state" of the App component. Then, the App component will pass the updated state to all the child component that rely on it so they all get updated (rendered again).

Therefore, the logic for deleting a meeting must exist in the App component. We can create a function (method) for this and pass it down to the Meeting component. The meeting component can then attach this "delete" method to the "onClick" event of the remove button.

Add the following method to App component:

removeMeeting = (meeting) => {
  this.setState((state) => {
    return {
      meetings: state.meetings.filter((m) => m._id !== meeting._id),
    };
  });
};

Notice setState is called with a function argument. This function receives the "current" state and it will return the "modified" (updated) state.

Let's now pass this method as props to the Meeting component; we must first pass it from App to ListMeetings:

- <ListMeetings meetings={this.state.meetings} />
+ <ListMeetings
+  meetings={this.state.meetings}
+  onDeleteMeeting={this.removeMeeting}
+ />

And then from ListMeetings to Meeting:

- <Meeting meeting={meeting} key={index} />
+ <Meeting
+   meeting={meeting}
+   key={index}
+   onDeleteMeeting={props.onDeleteMeeting}
+ />

Finally, update hook this method to the "onClick" event of the remove button in Meeting component:

- <button className="meeting-remove"></button>
+ <button
+   className="meeting-remove"
+   onClick={() => props.onDeleteMeeting(meeting)}
+ ></button>

Save the file and view the app in the browser.