Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
There's still one bug in our application, and it has to do with the indexes we're using to handle guest events.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up