1
00:00:01,140 --> 00:00:03,510
‫Let's now conditionally display

2
00:00:03,510 --> 00:00:06,303
‫and hide the new friend form.

3
00:00:07,380 --> 00:00:09,660
‫So basically, the functionality that we're looking

4
00:00:09,660 --> 00:00:13,800
‫for is clicking on this button will display the form

5
00:00:13,800 --> 00:00:15,690
‫and change the text to Close,

6
00:00:15,690 --> 00:00:17,340
‫and then when we click again,

7
00:00:17,340 --> 00:00:19,800
‫it will just hide the form again.

8
00:00:19,800 --> 00:00:22,020
‫So, let's think about this.

9
00:00:22,020 --> 00:00:23,950
‫Something should change in the UI

10
00:00:24,870 --> 00:00:27,870
‫as we click this button, right?

11
00:00:27,870 --> 00:00:31,200
‫Or in other words, the UI needs to be re-rendered

12
00:00:31,200 --> 00:00:35,070
‫as a result of the event of clicking that button.

13
00:00:35,070 --> 00:00:37,680
‫And so that is a very good sign

14
00:00:37,680 --> 00:00:39,963
‫that we need a new state variable.

15
00:00:41,790 --> 00:00:44,910
‫So let's go back here and then let's think

16
00:00:44,910 --> 00:00:48,750
‫about where we actually need that state variable.

17
00:00:48,750 --> 00:00:51,420
‫Well, basically we want to display

18
00:00:51,420 --> 00:00:55,650
‫and hide this form here based on that state variable.

19
00:00:55,650 --> 00:00:57,840
‫And where do we do that?

20
00:00:57,840 --> 00:00:59,943
‫So where do we display the form?

21
00:01:00,930 --> 00:01:04,080
‫Well, it is right here.

22
00:01:04,080 --> 00:01:06,420
‫So, right here in the app component.

23
00:01:06,420 --> 00:01:10,203
‫And so this is where we now place our new piece of state.

24
00:01:12,300 --> 00:01:14,527
‫So let's call it showAddFriend

25
00:01:18,428 --> 00:01:20,178
‫and setShowAddFriend.

26
00:01:23,070 --> 00:01:25,380
‫We could, of course, have used

27
00:01:25,380 --> 00:01:28,590
‫some shorter variable names here but you shouldn't be afraid

28
00:01:28,590 --> 00:01:31,443
‫of making your variables pretty descriptive.

29
00:01:33,090 --> 00:01:37,590
‫So use state, and by default the form should be hidden,

30
00:01:37,590 --> 00:01:39,903
‫and so we set this to false.

31
00:01:41,190 --> 00:01:45,300
‫And once again, it's important that VS code automatically

32
00:01:45,300 --> 00:01:48,390
‫imported useState from "react."

33
00:01:48,390 --> 00:01:50,883
‫So make sure you have that line right there.

34
00:01:52,200 --> 00:01:54,180
‫So, we have the first step

35
00:01:54,180 --> 00:01:58,170
‫of creating the state variable with the useState hook.

36
00:01:58,170 --> 00:02:00,123
‫Next up, let's use it.

37
00:02:01,260 --> 00:02:02,670
‫And we will use it

38
00:02:02,670 --> 00:02:06,120
‫to conditionally render this piece of JSX,

39
00:02:06,120 --> 00:02:08,850
‫so just this one component here.

40
00:02:08,850 --> 00:02:12,210
‫And for that we can again use the end operator

41
00:02:12,210 --> 00:02:14,550
‫with short circuiting.

42
00:02:14,550 --> 00:02:16,360
‫So, showAddFriend

43
00:02:17,820 --> 00:02:21,150
‫and formAddFriend.

44
00:02:21,150 --> 00:02:23,550
‫And so now, it is gone.

45
00:02:23,550 --> 00:02:27,003
‫So that's no longer here, but if it was true,

46
00:02:28,230 --> 00:02:32,043
‫then it should show up and indeed, there it is.

47
00:02:34,020 --> 00:02:36,660
‫Now okay, and with that in place,

48
00:02:36,660 --> 00:02:41,070
‫let's now go to the third step, which is updating the state.

49
00:02:41,070 --> 00:02:43,350
‫So, when do we update the state?

50
00:02:43,350 --> 00:02:46,980
‫Well, it is when we click here on the button.

51
00:02:46,980 --> 00:02:49,200
‫So that's this button right here.

52
00:02:49,200 --> 00:02:53,100
‫And so let's again specify the onclick handler.

53
00:02:53,100 --> 00:02:57,019
‫Now of course, this button component here doesn't have the

54
00:02:57,019 --> 00:03:00,090
‫onclick property, right?

55
00:03:00,090 --> 00:03:04,710
‫Only the native HTML elements, so for example this div here,

56
00:03:04,710 --> 00:03:08,283
‫or the actual button, does have the onclick property.

57
00:03:10,290 --> 00:03:12,657
‫So, let's actually cut it from here

58
00:03:12,657 --> 00:03:17,280
‫and place it a bit closer to the app because...

59
00:03:17,280 --> 00:03:18,930
‫Or actually even before,

60
00:03:18,930 --> 00:03:21,660
‫'cause this is our only reusable component,

61
00:03:21,660 --> 00:03:24,240
‫so let's place it a bit separately.

62
00:03:24,240 --> 00:03:26,280
‫But anyway, as I was saying,

63
00:03:26,280 --> 00:03:28,890
‫this button here can of course accept the

64
00:03:28,890 --> 00:03:33,750
‫onclick prop because it is an HTML element, basically.

65
00:03:33,750 --> 00:03:37,083
‫Not technically, but we can think of it as that.

66
00:03:38,070 --> 00:03:40,770
‫So here we can say onclick,

67
00:03:40,770 --> 00:03:44,100
‫but again our custom button component

68
00:03:44,100 --> 00:03:46,320
‫doesn't have that prop.

69
00:03:46,320 --> 00:03:50,283
‫However, of course we still want to specify onclick here.

70
00:03:53,580 --> 00:03:54,413
‫Right?

71
00:03:54,413 --> 00:03:57,270
‫And so, what we can do is simply,

72
00:03:57,270 --> 00:04:00,093
‫well, accept that here as a prop.

73
00:04:02,070 --> 00:04:04,200
‫And this is actually exactly what we did

74
00:04:04,200 --> 00:04:07,050
‫when we built our first reusable button

75
00:04:07,050 --> 00:04:09,450
‫in the steps component.

76
00:04:09,450 --> 00:04:10,323
‫Remember that?

77
00:04:11,910 --> 00:04:16,410
‫But anyway, now here it's as simple as then passing

78
00:04:16,410 --> 00:04:18,303
‫that onclick right here.

79
00:04:19,950 --> 00:04:23,700
‫And now all we have to do is to pass in the function

80
00:04:23,700 --> 00:04:26,493
‫that we want to be executed when the click happens.

81
00:04:27,540 --> 00:04:29,640
‫So, we will create a new function

82
00:04:29,640 --> 00:04:31,790
‫called handleShowAddFriend.

83
00:04:35,790 --> 00:04:39,660
‫So, let's copy that, and then, as always,

84
00:04:39,660 --> 00:04:43,773
‫let's create a new event handler function right here.

85
00:04:46,650 --> 00:04:49,140
‫So, what should happen here?

86
00:04:49,140 --> 00:04:52,950
‫Well, we want to change the showAddFriend state,

87
00:04:52,950 --> 00:04:55,920
‫and for that we use the setter function.

88
00:04:55,920 --> 00:04:59,850
‫And what we want to do is to always set the showAddFriend

89
00:04:59,850 --> 00:05:02,760
‫to the opposite as it is right now.

90
00:05:02,760 --> 00:05:05,280
‫Or in other words, the new state will depend

91
00:05:05,280 --> 00:05:06,630
‫on the current state.

92
00:05:06,630 --> 00:05:11,130
‫And so as always, or not always, but as many times,

93
00:05:11,130 --> 00:05:14,070
‫we use a callback which gets as an input

94
00:05:14,070 --> 00:05:17,643
‫the current state, and I will just call it show here,

95
00:05:19,290 --> 00:05:23,553
‫and then the new state will be the opposite of that.

96
00:05:24,660 --> 00:05:29,160
‫Again, any name here would work, but while we don't have

97
00:05:29,160 --> 00:05:30,990
‫to write the entire thing here,

98
00:05:30,990 --> 00:05:32,850
‫let's just go for something short.

99
00:05:32,850 --> 00:05:35,520
‫And if I click here, beautiful.

100
00:05:35,520 --> 00:05:37,560
‫So, that works perfectly,

101
00:05:37,560 --> 00:05:40,560
‫and now all we have to change is the text here

102
00:05:40,560 --> 00:05:41,700
‫when we click.

103
00:05:41,700 --> 00:05:46,560
‫So now when the form is open, it should say close.

104
00:05:46,560 --> 00:05:49,180
‫And so, that's just some more conditional rendering

105
00:05:50,550 --> 00:05:52,323
‫right here in the button actually.

106
00:05:53,460 --> 00:05:56,820
‫So let's wrap this here into JavaScript mode,

107
00:05:56,820 --> 00:06:01,530
‫and then let's say showAddFriend.

108
00:06:02,520 --> 00:06:06,180
‫If so, so if it is currently true,

109
00:06:06,180 --> 00:06:07,950
‫then we want to display close

110
00:06:07,950 --> 00:06:11,190
‫and otherwise then this other string here

111
00:06:11,190 --> 00:06:12,873
‫which says Add Friend.

112
00:06:13,830 --> 00:06:17,730
‫Give it a save, and yes, it says close,

113
00:06:17,730 --> 00:06:20,850
‫and now back to the original Add Friend.

114
00:06:20,850 --> 00:06:21,990
‫Nice!

115
00:06:21,990 --> 00:06:25,860
‫So, we are now able to display and hide the form

116
00:06:25,860 --> 00:06:28,230
‫but of course the form doesn't work yet,

117
00:06:28,230 --> 00:06:31,023
‫and so let's take care of that in the next video.