This video covers one solution to the filter bug we spotted in the previous video.
Okay, so 0:00 now I'll show you how I fixed the filter bug we spotted in the previous video. 0:00 Remember, I needed a unique ID value, so I started by creating a count variable, 0:05 in App.js, named lastGuestId and set it to 0 by default. 0:11 Then I wrote a method called newGuestId that increments the count and 0:15 returns it value. 0:21 Then, down in the newGuestSubmitHandler, 0:22 I use this method to supply unique ids to newGuests as they're created. 0:26 So, as you can see it's adding the id to each new guest object and state. 0:31 Now that guest had an ID I went into the guest list component and 0:36 replaced the indexes with guest.id. 0:42 Every handler like toggleGuestProperty, toggleConfirmation, removeGuest and 0:47 so on is now using an ID to find the corresponding state instead of an index. 0:53 So I changed the implementation of all handlers to use this different data. 0:58 Notice that I replaced the index parameter and 1:04 the handlers with id and removed index from the map parameters. 1:07 For example, toggleGuestProperty now takes the parameters property and 1:12 id then to set the state it checks if id strictly equals guest.id. 1:18 And you'll also notice that because the functions no longer take an index, 1:23 I removed At from the end of all handlers. 1:29 So that meant I had to change their names wherever they were used, 1:32 including the propType declarations. 1:35 In App.js, the removeGuest handler changed quite a bit. 1:37 Instead of slicing the array according to the index of the guest to remove, 1:43 I used the filter method. 1:48 The filter method here removes the guest from the array by 1:50 comparing the id to remove with each guest id. 1:55 So using the strict inequality operator, 1:58 the callback returns false only when the two IDs match and that element is removed. 2:01 Now I'll switch to the browser to test the latest changes. 2:07 I'll add three names to the list, Nic, 2:11 Treasure, And Alyssa. 2:15 And in React Dev Tools, If I have a look at the state, 2:20 I see that each guest object now has an ID property set to a unique number value. 2:24 So, I'll check to confirm Treasure and Nic. 2:35 Then check to hide those who haven't responded. 2:39 Now when I uncheck Treasure, the correct tile disappears, and 2:43 unchecking Nic also removes Nic from the list, great. 2:48 I hope you enjoyed building this React app with me and 2:52 that you feel more comfortable working with React in general. 2:55 This app, while it functions well, could still be improved upon. 2:59 For example, every time a user refreshes the page, it loses all the names. 3:02 So you can connect it to local storage to keep the names in the app, 3:07 even after refreshing the app or restarting the app. 3:11 Remember, we're here to help, so 3:14 if you have questions about anything covered in this course, 3:16 feel free to reach out to the Treehouse staff or other students in the community. 3:19 Thanks everyone, and happy coding. 3:22
You need to sign up for Treehouse in order to download course files.Sign up