1
00:00:00,825 --> 00:00:04,466
Let's implement the confirmed
guest filtering function.

2
00:00:04,466 --> 00:00:06,766
We'll want to turn our filter on and off,

3
00:00:06,766 --> 00:00:10,861
which suggests we want to put a Boolean
on the state as we've done before.

4
00:00:10,861 --> 00:00:14,757
So far we've been working with
the state of individual guests.

5
00:00:14,757 --> 00:00:16,711
Well, now we want to filter guests, so

6
00:00:16,711 --> 00:00:19,573
we'll need to treat the collection
of guests as a whole.

7
00:00:19,573 --> 00:00:24,854
This means our new filter Boolean will sit
outside of the guest array in the state.

8
00:00:24,854 --> 00:00:28,772
So in App.js,
I´ll add the Boolean to the initial state.

9
00:00:28,772 --> 00:00:33,876
I´ll call it isFiltered,
and set it to false.

10
00:00:33,876 --> 00:00:37,735
Now, I´ll write a handler to
set this property on the state.

11
00:00:37,735 --> 00:00:41,487
And this will be easier than the other
handlers we've written because we won't

12
00:00:41,487 --> 00:00:43,282
need to hunt through the guest array.

13
00:00:43,282 --> 00:00:46,032
We just have one value to worry about,
it's filtered.

14
00:00:46,032 --> 00:00:53,066
So just above getTotalInvited, I'll
create a new handler called toggleFilter.

15
00:00:57,700 --> 00:01:02,584
And inside the handler, I'll set a new
state by reversing the isFiltered

16
00:01:02,584 --> 00:01:05,355
Boolean value in a similar way as before.

17
00:01:05,355 --> 00:01:11,272
So we'll add this.setState[{

18
00:01:11,272 --> 00:01:19,642
is.Filtered: !this.state.isFiltered.

19
00:01:23,098 --> 00:01:29,905
And now I'll bind the method to the on
change events of the check box.

20
00:01:29,905 --> 00:01:35,288
So here's my check box and
right below the type

21
00:01:35,288 --> 00:01:42,476
attribute we'll say
onChange={this.toggleFilter}.

22
00:01:42,476 --> 00:01:46,477
And we also want to complete
the pattern we've been suing and

23
00:01:46,477 --> 00:01:49,778
bind the checked property
to the isFilter state.

24
00:01:49,778 --> 00:01:54,051
So let's pass checked=

25
00:01:54,051 --> 00:01:59,141
this.state.isFiltered.

26
00:01:59,141 --> 00:02:03,477
Now that our users can turn filtering
on and off, let's tackle the filtering.

27
00:02:03,477 --> 00:02:06,249
We need to do that in
the guest list component where

28
00:02:06,249 --> 00:02:08,520
all the guests are rendered.

29
00:02:08,520 --> 00:02:12,905
So let's scroll down to
the guest list component and

30
00:02:12,905 --> 00:02:15,902
pass the isFiltered value into it.

31
00:02:15,902 --> 00:02:20,526
I'll add a new prop to isFiltered and

32
00:02:20,526 --> 00:02:25,309
set it to this.state.isFiltered.

33
00:02:28,088 --> 00:02:31,040
So now inside GuestList.js,

34
00:02:31,040 --> 00:02:35,817
let's first add it to
the PropType declaration.

35
00:02:35,817 --> 00:02:39,601
Let's see, isFiltered

36
00:02:39,601 --> 00:02:44,832
PropTypes.bool.isRequired.

37
00:02:44,832 --> 00:02:48,620
And to do the filtering,
we can use the filter array method.

38
00:02:48,620 --> 00:02:51,708
Since it returns a new filtered array,

39
00:02:51,708 --> 00:02:55,833
we can create a new line
above where we map our array.

40
00:02:55,833 --> 00:03:01,227
So right after guests, I'll create
a new line and we'll say .filter and

41
00:03:01,227 --> 00:03:06,273
you can see that the array will be
filtered first to remove elements we

42
00:03:06,273 --> 00:03:11,341
don't want to appear,
then they'll be mapped over for rendering.

43
00:03:11,341 --> 00:03:15,664
Now, we'll need to put a call back into
the filter method that will look at

44
00:03:15,664 --> 00:03:17,059
the state and decide for

45
00:03:17,059 --> 00:03:20,428
each guest whether it should
make it into the final view.

46
00:03:20,428 --> 00:03:24,510
I'll start by defining a guest parameter.

47
00:03:24,510 --> 00:03:30,187
We wanna return false from this function
if a guest shouldn't appear and

48
00:03:30,187 --> 00:03:31,871
true if they should.

49
00:03:31,871 --> 00:03:35,416
Let's start by thinking
about the isFiltered value.

50
00:03:35,416 --> 00:03:38,909
When this is true,
we confirm guest filter is on,

51
00:03:38,909 --> 00:03:42,165
meaning we want certain
guests to disappear.

52
00:03:42,165 --> 00:03:48,186
When false, the filter is off and we want
all guests to appear no matter what.

53
00:03:48,186 --> 00:03:52,253
If you think about it,
the filter is a kind of logical reversal.

54
00:03:52,253 --> 00:03:56,579
When isFilter is true,
we sometimes want to return false so

55
00:03:56,579 --> 00:03:58,835
that only some guests appear.

56
00:03:58,835 --> 00:04:03,258
And when false, we always want to
return true so that all guests appear.

57
00:04:03,258 --> 00:04:06,302
So to return true from
the filter function,

58
00:04:06,302 --> 00:04:10,675
we will need to return the opposite
of the value in isFiltered.

59
00:04:10,675 --> 00:04:14,528
So to return the opposite
of isFiltered's value,

60
00:04:14,528 --> 00:04:17,581
I can use the bang or exclamation point.

61
00:04:17,581 --> 00:04:22,341
So I'll return !props.isFiltered.

62
00:04:24,804 --> 00:04:31,437
So unlike props.isFiltered, we want to
return the actual value of isConfirmed,

63
00:04:31,437 --> 00:04:37,705
not its opposite, but we only we want
to do that if props.isFiltered is true.

64
00:04:37,705 --> 00:04:41,417
For this reason,
we'll use JavaScript's logical or

65
00:04:41,417 --> 00:04:44,089
operator to join the two expressions.

66
00:04:44,089 --> 00:04:51,401
So I'll add a double pipe
followed by guest.isConfirmed.

67
00:04:51,401 --> 00:04:56,044
Now when the expression to the left
of the or operator returns true,

68
00:04:56,044 --> 00:04:58,985
the entire expression evaluates to true.

69
00:04:58,985 --> 00:05:02,249
This is the case when isFilter is false.

70
00:05:02,249 --> 00:05:07,583
And when the left expression is false,
the right expression is returned.

71
00:05:07,583 --> 00:05:12,493
So when isFilter is true,
isConfirm will determine

72
00:05:12,493 --> 00:05:16,298
whether true or false will be returned.

73
00:05:16,298 --> 00:05:19,478
If the guest is confirmed,
true will be returned and

74
00:05:19,478 --> 00:05:23,540
the guest will be displayed,
otherwise false will be displayed.

75
00:05:23,540 --> 00:05:27,383
Go ahead pause the video to make sure that
you can follow what's happening here.

76
00:05:27,383 --> 00:05:31,777
If you need a refresher on how logical
operators work, there are some links in

77
00:05:31,777 --> 00:05:36,120
the teacher's notes including a Tree House
video looking at them in depth.

78
00:05:36,120 --> 00:05:40,098
So let's save our file and
have a look in the browser.

79
00:05:40,098 --> 00:05:44,657
When I click on the check box
to hide unconfirmed guest,

80
00:05:44,657 --> 00:05:46,795
you can see that it works.

81
00:05:46,795 --> 00:05:49,048
We now only see Nic.

82
00:05:49,048 --> 00:05:53,589
Now if I click off and
confirm another guest,

83
00:05:53,589 --> 00:05:57,900
now we see two guests
appear on the screen.

84
00:05:57,900 --> 00:06:02,006
I can even uncheck one of the guests and
they will disappear.

85
00:06:02,006 --> 00:06:05,720
Next up, let's allow users to
add new guests to the list.