There's still one bug in our application, and it has to do with the indexes we're using to handle guest events.
You may have already noticed this, but 0:00 there is a bug in our application let's see the problem. 0:01 I'll apply the confirmed filter by checking this box, 0:03 and if I uncheck the box to unconfirm Nic, I would expect 0:07 Nic's tile to disappear because Nic would no longer be a confirmed guest. 0:10 Well, when I uncheck the tile doesn't disappear, and 0:15 we see Treasure's tile appear. 0:18 Suddenly Treasure is a confirmed guest that's strange so what's going on here? 0:20 Well, it has to do with the indexes we're using to handle guest events. 0:25 I'll open the GuestList component or index.js inside the GuestList folder. 0:29 And here you can see that we're passing the index in 0:35 this map function into each guest component's change handlers. 0:38 Well, the index is what each handler uses to find the right object to manipulate on 0:43 the state. 0:48 For example, if we go to App.js, and have a look at the setNameAt method, 0:48 we can see that it takes the index passed in and finds the guest in this state. 0:54 Then, it sets the name on that guest well, 0:59 this approach works fine until we filter the array, removing elements from it. 1:02 This might be a little bit easier to see in the browser. 1:07 So I'll switch over to the browser, refresh the app and 1:10 open up the React dev tools so you can see the state. 1:13 I'll add a new name to the list, let's say Erika. 1:19 So now when the filter is inactive, all the guests that exist in this 1:22 state appear, and If I click to confirm the second guest for example, 1:27 Treasure the toggle confirmation at handler takes the index from this tile, 1:32 which you can see here in this state is one, and 1:38 the handler finds the guest on this state setting it to confirmed. 1:42 However if I turn the confirmed guest filter on and 1:47 uncheck the first tile the index our handler now receives is zero 1:51 which is not the index of the corresponding on the state. 1:55 You can see and react dev tools that the Erika tile still has 1:59 an index of 1, and treasures indexes still 1. 2:04 So now we see the zero element on the state appear because that's 2:08 the index Erika had when I checked to confirm treasure. 2:13 So one way to solve this would be to change the way we're locating this 2:18 components with our handlers. 2:22 We could place a unique ID on each new guest, we can then pass the ID into that 2:24 guest handler and use that ID to locate the right element and the state to change. 2:29 Now in a real world app you'd be pulling data in from a database and 2:34 often that data comes with unique IDs we could use. 2:38 For this situation, we'll add unique IDs to each guest as they're created then 2:41 we'll use those IDs to handle changes to them on the state. 2:46 Keep in mind that by unique I just mean that no two guest can have the same index. 2:49 So I'd like to challenge you to solve this on your own, this is a little more 2:55 advanced but I believe you can do it and as a hint you'll need to build some way to 2:59 generate unique IDs for each guest and use those instead of the guest array index. 3:04 Before I turn you loose though, 3:09 it might help to remove the initial values we have in state first. 3:12 So I'll remove everything inside the guest array, so 3:16 that it starts as an empty array. 3:19 All right, go ahead and see if you can work out how to solve this problem, and 3:20 in the next video, I'll show you my solution. 3:24 Good luck, and have fun. 3:26
You need to sign up for Treehouse in order to download course files.Sign up