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
This video covers one solution to the filter bug we spotted in the previous video.
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
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up