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
In this video, we'll implement the confirmed guest filtering function.
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
Let's implement the confirmed
guest filtering function.
0:00
We'll want to turn our filter on and off,
0:04
which suggests we want to put a Boolean
on the state as we've done before.
0:06
So far we've been working with
the state of individual guests.
0:10
Well, now we want to filter guests, so
0:14
we'll need to treat the collection
of guests as a whole.
0:16
This means our new filter Boolean will sit
outside of the guest array in the state.
0:19
So in App.js,
I´ll add the Boolean to the initial state.
0:24
I´ll call it isFiltered,
and set it to false.
0:28
Now, I´ll write a handler to
set this property on the state.
0:33
And this will be easier than the other
handlers we've written because we won't
0:37
need to hunt through the guest array.
0:41
We just have one value to worry about,
it's filtered.
0:43
So just above getTotalInvited, I'll
create a new handler called toggleFilter.
0:46
And inside the handler, I'll set a new
state by reversing the isFiltered
0:57
Boolean value in a similar way as before.
1:02
So we'll add this.setState[{
1:05
is.Filtered: !this.state.isFiltered.
1:11
And now I'll bind the method to the on
change events of the check box.
1:23
So here's my check box and
right below the type
1:29
attribute we'll say
onChange={this.toggleFilter}.
1:35
And we also want to complete
the pattern we've been suing and
1:42
bind the checked property
to the isFilter state.
1:46
So let's pass checked=
1:49
this.state.isFiltered.
1:54
Now that our users can turn filtering
on and off, let's tackle the filtering.
1:59
We need to do that in
the guest list component where
2:03
all the guests are rendered.
2:06
So let's scroll down to
the guest list component and
2:08
pass the isFiltered value into it.
2:12
I'll add a new prop to isFiltered and
2:15
set it to this.state.isFiltered.
2:20
So now inside GuestList.js,
2:28
let's first add it to
the PropType declaration.
2:31
Let's see, isFiltered
2:35
PropTypes.bool.isRequired.
2:39
And to do the filtering,
we can use the filter array method.
2:44
Since it returns a new filtered array,
2:48
we can create a new line
above where we map our array.
2:51
So right after guests, I'll create
a new line and we'll say .filter and
2:55
you can see that the array will be
filtered first to remove elements we
3:01
don't want to appear,
then they'll be mapped over for rendering.
3:06
Now, we'll need to put a call back into
the filter method that will look at
3:11
the state and decide for
3:15
each guest whether it should
make it into the final view.
3:17
I'll start by defining a guest parameter.
3:20
We wanna return false from this function
if a guest shouldn't appear and
3:24
true if they should.
3:30
Let's start by thinking
about the isFiltered value.
3:31
When this is true,
we confirm guest filter is on,
3:35
meaning we want certain
guests to disappear.
3:38
When false, the filter is off and we want
all guests to appear no matter what.
3:42
If you think about it,
the filter is a kind of logical reversal.
3:48
When isFilter is true,
we sometimes want to return false so
3:52
that only some guests appear.
3:56
And when false, we always want to
return true so that all guests appear.
3:58
So to return true from
the filter function,
4:03
we will need to return the opposite
of the value in isFiltered.
4:06
So to return the opposite
of isFiltered's value,
4:10
I can use the bang or exclamation point.
4:14
So I'll return !props.isFiltered.
4:17
So unlike props.isFiltered, we want to
return the actual value of isConfirmed,
4:24
not its opposite, but we only we want
to do that if props.isFiltered is true.
4:31
For this reason,
we'll use JavaScript's logical or
4:37
operator to join the two expressions.
4:41
So I'll add a double pipe
followed by guest.isConfirmed.
4:44
Now when the expression to the left
of the or operator returns true,
4:51
the entire expression evaluates to true.
4:56
This is the case when isFilter is false.
4:58
And when the left expression is false,
the right expression is returned.
5:02
So when isFilter is true,
isConfirm will determine
5:07
whether true or false will be returned.
5:12
If the guest is confirmed,
true will be returned and
5:16
the guest will be displayed,
otherwise false will be displayed.
5:19
Go ahead pause the video to make sure that
you can follow what's happening here.
5:23
If you need a refresher on how logical
operators work, there are some links in
5:27
the teacher's notes including a Tree House
video looking at them in depth.
5:31
So let's save our file and
have a look in the browser.
5:36
When I click on the check box
to hide unconfirmed guest,
5:40
you can see that it works.
5:44
We now only see Nic.
5:46
Now if I click off and
confirm another guest,
5:49
now we see two guests
appear on the screen.
5:53
I can even uncheck one of the guests and
they will disappear.
5:57
Next up, let's allow users to
add new guests to the list.
6:02
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