1
00:00:00,150 --> 00:00:07,020
All right, and once we're clear with ternary operator now, I want to set up a small example where

2
00:00:07,050 --> 00:00:16,290
we will toggled component in this case and in a process, I'll try to hammer home why we need the up

3
00:00:16,290 --> 00:00:16,760
function.

4
00:00:17,160 --> 00:00:19,200
So there's going to be a little bit of repetition.

5
00:00:19,410 --> 00:00:26,070
Eventually we will set up again the event listener on the window and I'll showcase why it is important

6
00:00:26,070 --> 00:00:35,160
to use the cleaning function because setting up the dependency list empty is not always going to save

7
00:00:35,160 --> 00:00:35,710
us.

8
00:00:35,730 --> 00:00:36,170
All right.

9
00:00:36,540 --> 00:00:41,490
Now, what we're looking for in the address is file number three.

10
00:00:41,910 --> 00:00:49,320
So still conditional rendering still set up for in this case I'm looking for and then for now, of course,

11
00:00:49,320 --> 00:00:51,060
show and hide.

12
00:00:51,360 --> 00:00:55,690
So the moment you're on it because of this is what you're going to see?

13
00:00:56,110 --> 00:01:02,760
No, I'm going to navigate the files again in the setup folder, file number three, show and hide.

14
00:01:03,000 --> 00:01:05,440
And first, I would want to set up a state value.

15
00:01:05,550 --> 00:01:06,990
So, again, we have to use that.

16
00:01:07,290 --> 00:01:13,430
Let's go and say const show and then set show function.

17
00:01:13,890 --> 00:01:14,490
All right.

18
00:01:14,920 --> 00:01:15,440
Not bad.

19
00:01:15,720 --> 00:01:18,390
And that is equal to use state.

20
00:01:18,390 --> 00:01:21,570
And then by default, it is going to be false.

21
00:01:21,900 --> 00:01:22,350
All right.

22
00:01:22,710 --> 00:01:26,940
Now, as far as the return, let's make it a bit more interesting.

23
00:01:27,420 --> 00:01:32,600
More first of I'll set up my fragment and then we'll start with the button.

24
00:01:32,970 --> 00:01:38,400
I'll say that there is a class name for the button and the class name is Button, of course.

25
00:01:38,730 --> 00:01:42,900
And then remember how we were toggling the state value again.

26
00:01:42,900 --> 00:01:49,820
We'll do the same thing where we have unclick, then we'll have our inline function and then let's run

27
00:01:50,130 --> 00:01:50,970
that show.

28
00:01:51,270 --> 00:01:58,670
And each and every time we'll click, we'll set the new state value opposite to the current one.

29
00:01:59,010 --> 00:02:01,350
So if it is false, then it's going to become true.

30
00:02:01,560 --> 00:02:04,680
If it is true and it's going to become false.

31
00:02:04,860 --> 00:02:10,440
And in here, let's type show and then forward slash.

32
00:02:10,440 --> 00:02:10,740
Right.

33
00:02:10,980 --> 00:02:11,520
Let's say.

34
00:02:12,400 --> 00:02:14,080
OK, we should have the button.

35
00:02:14,380 --> 00:02:21,910
Everything is awesome, and now, depending on that shock value, I will show or hide another component.

36
00:02:22,150 --> 00:02:27,640
So that is going to be the difference where I previously I mentioned multiple times that we're not limited

37
00:02:27,640 --> 00:02:28,830
to the moment.

38
00:02:29,080 --> 00:02:36,400
So, of course, this is the example where we will toggle the react component and for the time being,

39
00:02:36,670 --> 00:02:38,440
it's simply going to be a div.

40
00:02:38,800 --> 00:02:45,220
So let's go with there and I'll add a little bit of styling here.

41
00:02:45,730 --> 00:02:53,710
Minimal go with the margin top and that is going to be equal to two arms and then within a div let's

42
00:02:53,710 --> 00:02:58,540
again go with window window and then we'll check for those pixels.

43
00:02:58,780 --> 00:03:00,970
So for the time being of course we haven't set up anything.

44
00:03:00,970 --> 00:03:03,830
So I'm just going to say size and color.

45
00:03:04,330 --> 00:03:08,580
So once we save, we should see something on a screen.

46
00:03:08,590 --> 00:03:13,790
But of course we don't because we haven't implemented that show.

47
00:03:14,170 --> 00:03:17,340
So what I would want here is set up curly calibrations.

48
00:03:17,590 --> 00:03:25,990
And then also, if show is true, then we use the and operator and then I would want to display the

49
00:03:25,990 --> 00:03:27,020
item component.

50
00:03:27,250 --> 00:03:33,280
And of course, I do need to be a bit more specific here where it is a component and of course, it

51
00:03:33,280 --> 00:03:34,540
is hidden by default.

52
00:03:34,540 --> 00:03:36,730
But in the moment we click, check it out.

53
00:03:37,150 --> 00:03:39,900
Now I have a window and size.

54
00:03:40,210 --> 00:03:43,960
So as you can see now I'm toggling the component.

55
00:03:44,500 --> 00:03:44,950
Correct.

56
00:03:45,250 --> 00:03:48,110
And it is important because of two reasons.

57
00:03:48,130 --> 00:03:54,850
First, the fact that we're not limited to just HDMI elements like we had in the previous example.

58
00:03:55,880 --> 00:04:03,980
And the second thing I would want to hammer home the fact that we need to use the cleaning function

59
00:04:04,220 --> 00:04:11,840
when we're setting up some kind of side effect that needs to be cleaned up, which in our case is still

60
00:04:11,840 --> 00:04:15,280
going to be that event listener on the window.

61
00:04:15,620 --> 00:04:23,420
So within the item, not within the show and hide component within the item, what I want is to set

62
00:04:23,420 --> 00:04:25,850
up that size state variable.

63
00:04:26,120 --> 00:04:35,590
So again, we go here with cost and size and set size like so and now we're using use state.

64
00:04:35,930 --> 00:04:39,550
And again, let's check for that window in here with Beautiful.

65
00:04:39,950 --> 00:04:47,440
And then we will set up each and every time when we render the component our use of.

66
00:04:48,830 --> 00:04:50,410
So we're going to go here with you.

67
00:04:51,290 --> 00:04:58,940
In fact, now we have our callback function and just to showcase that it's not going to work if we simply

68
00:04:59,120 --> 00:05:01,000
add our empty array.

69
00:05:01,390 --> 00:05:04,780
Now, let me add here a window and then the event.

70
00:05:04,820 --> 00:05:08,470
Let's not show as will be resizing the window.

71
00:05:08,750 --> 00:05:10,490
We'll be listening for this rent.

72
00:05:11,030 --> 00:05:16,030
So resize and then we'll run our check out.

73
00:05:16,370 --> 00:05:21,800
Like I said, a little bit of repetition because we already set this up when we worked with you.

74
00:05:22,430 --> 00:05:24,730
Now, of course, let's come up with our function.

75
00:05:25,250 --> 00:05:28,070
So it's going to be check size function.

76
00:05:28,310 --> 00:05:30,270
It's not going to be looking for any parameters.

77
00:05:30,290 --> 00:05:38,150
However, each and every time we will resize the window, I will set my state voucher equal to a window

78
00:05:38,510 --> 00:05:42,480
and run in with OK, beautiful.

79
00:05:42,950 --> 00:05:51,080
And I remember when we covered usufruct, I said that even though in that particular scenario, the

80
00:05:51,110 --> 00:05:57,320
empty dependancy array saved us because we were not toggling the component.

81
00:05:57,680 --> 00:05:59,390
Essentially the component was there.

82
00:05:59,600 --> 00:06:05,670
And the first time the component rendered, we set up the event listener and we were good to go.

83
00:06:06,470 --> 00:06:11,140
However, the problem now is going to be that we will be toggling this component.

84
00:06:11,750 --> 00:06:18,410
So even though we run this only once, because we will toggle decomposing, essentially we will set

85
00:06:18,410 --> 00:06:20,810
up multiple event listeners.

86
00:06:21,020 --> 00:06:26,720
And I guess in order to see better what is happening, let's just go with size here.

87
00:06:27,080 --> 00:06:29,900
Adding to it now, once I click, check it out.

88
00:06:30,330 --> 00:06:34,850
Now, of course, the window is four hundred and sixty two, by the way.

89
00:06:34,850 --> 00:06:37,110
We can add pixels as well if you want.

90
00:06:37,970 --> 00:06:40,220
So let me go here with pixels again.

91
00:06:40,220 --> 00:06:40,910
I show.

92
00:06:41,120 --> 00:06:47,330
And then as I'm going to be increasing or decreasing the size of the window, of course of this value

93
00:06:47,660 --> 00:06:48,870
will change.

94
00:06:49,190 --> 00:06:56,570
Now the problem is a little bit different where every time as I'm clicking on toggling the component.

95
00:06:56,570 --> 00:06:56,980
Correct.

96
00:06:57,410 --> 00:07:04,640
And if we check out the elements and then around lessness and then resize notice, is this the behavior

97
00:07:04,640 --> 00:07:05,490
that we're looking for?

98
00:07:06,180 --> 00:07:07,940
No, of course not.

99
00:07:08,360 --> 00:07:14,930
So even though empty array saved us in the previous example because we were not toggling the component,

100
00:07:15,320 --> 00:07:21,320
this is why this cleanup function is so important, because even though this runs only once, because

101
00:07:21,320 --> 00:07:26,430
we're toggling the component, we run every time we show the component.

102
00:07:26,750 --> 00:07:35,090
So that's why, remember, we need to go with return and we have the function that runs when, of course,

103
00:07:35,150 --> 00:07:38,030
the component is removed.

104
00:07:38,520 --> 00:07:45,360
And this case, of course, once we removed from the norm and then we'll go with window that removing

105
00:07:45,390 --> 00:07:46,040
and Lessner.

106
00:07:46,250 --> 00:07:51,030
And again, I'm looking for resize and Oleron check size.

107
00:07:51,860 --> 00:07:52,490
So now what?

108
00:07:52,490 --> 00:07:57,230
You'll notice that once you navigate here, you can see that there is no eventless there.

109
00:07:57,560 --> 00:08:01,550
And that should be the case because the component is not displayed.

110
00:08:01,790 --> 00:08:04,670
Then at the moment we show the component.

111
00:08:04,950 --> 00:08:08,710
Then of course, we set up the first event listener.

112
00:08:09,020 --> 00:08:15,380
But then as I'm clicking notice, I'm not going to be adding those eventless.

113
00:08:15,710 --> 00:08:19,780
So there's always going to be one because we have our Klina function.

114
00:08:19,970 --> 00:08:30,200
So once we remove the component from the DOM using the show and toggle, then of course we'll also remove

115
00:08:30,200 --> 00:08:31,190
our event.

116
00:08:31,190 --> 00:08:37,610
WESNER So that's how we can toggle components in Riak using the and operator.

117
00:08:37,910 --> 00:08:44,240
And also that's why it is so, so, so, so, so, so crucial using the clean up function.