Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React by Example!
You have completed React by Example!
Preview
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