1
00:00:01,110 --> 00:00:03,150
‫Another very important technique

2
00:00:03,150 --> 00:00:06,210
‫that we use all the time in React development

3
00:00:06,210 --> 00:00:08,220
‫is conditional rendering.

4
00:00:08,220 --> 00:00:10,890
‫So in this video, and the next two,

5
00:00:10,890 --> 00:00:15,000
‫we will talk about three ways of rendering some JSX,

6
00:00:15,000 --> 00:00:17,340
‫or even an entire component,

7
00:00:17,340 --> 00:00:19,320
‫based on a condition

8
00:00:19,320 --> 00:00:22,893
‫and starting in this lecture with the & operator.

9
00:00:24,150 --> 00:00:27,616
‫So, remember how way back we created this

10
00:00:27,616 --> 00:00:31,560
‫isOpen variable right here in the footer.

11
00:00:31,560 --> 00:00:34,260
‫So basically this variable tells us

12
00:00:34,260 --> 00:00:36,420
‫if currently the restaurant is open,

13
00:00:36,420 --> 00:00:41,220
‫which happens when the current hour is between 12 and 22.

14
00:00:41,220 --> 00:00:43,380
‫And so now what we want to do is

15
00:00:43,380 --> 00:00:47,730
‫to basically only render something here inside of the footer

16
00:00:47,730 --> 00:00:50,250
‫if the restaurant is currently open.

17
00:00:50,250 --> 00:00:53,430
‫And so that's what conditional rendering is all about.

18
00:00:53,430 --> 00:00:56,670
‫So it's basically rendering some piece of the UI,

19
00:00:56,670 --> 00:00:59,130
‫no matter if that's a piece of JSX,

20
00:00:59,130 --> 00:01:01,290
‫or if it's an entire component,

21
00:01:01,290 --> 00:01:03,480
‫based on a certain condition.

22
00:01:03,480 --> 00:01:04,830
‫And again, in this case,

23
00:01:04,830 --> 00:01:08,040
‫the condition is simply whether the restaurant

24
00:01:08,040 --> 00:01:10,113
‫is currently open or not.

25
00:01:11,340 --> 00:01:14,280
‫So let's actually get rid of all of this.

26
00:01:14,280 --> 00:01:17,220
‫And then here, since we are going to use JavaScript,

27
00:01:17,220 --> 00:01:19,380
‫let's enter JavaScript mode

28
00:01:19,380 --> 00:01:22,800
‫using these curly braces once more.

29
00:01:22,800 --> 00:01:25,560
‫So, as I mentioned initially in this lecture,

30
00:01:25,560 --> 00:01:27,450
‫we're going to do conditional rendering

31
00:01:27,450 --> 00:01:29,250
‫with the & operator

32
00:01:29,250 --> 00:01:32,640
‫and that works because of short circuiting.

33
00:01:32,640 --> 00:01:35,880
‫Now, in case you're not sure what short circuiting means,

34
00:01:35,880 --> 00:01:38,310
‫and how it works with the & operator,

35
00:01:38,310 --> 00:01:40,710
‫then please go back to the previous section

36
00:01:40,710 --> 00:01:43,740
‫where I have one entire lecture about that.

37
00:01:43,740 --> 00:01:44,850
‫But in a nutshell,

38
00:01:44,850 --> 00:01:48,030
‫if we have some true or some truthy value,

39
00:01:48,030 --> 00:01:49,367
‫such as isOpen,

40
00:01:50,580 --> 00:01:53,100
‫and if we then use the & operator,

41
00:01:53,100 --> 00:01:56,310
‫then the second part of the & operator,

42
00:01:56,310 --> 00:01:57,720
‫so whatever comes here,

43
00:01:57,720 --> 00:02:01,113
‫will be returned in case that the condition is true.

44
00:02:02,820 --> 00:02:05,790
‫So let's just write something very simple here.

45
00:02:05,790 --> 00:02:07,530
‫Just Open.

46
00:02:07,530 --> 00:02:08,940
‫So just like this.

47
00:02:08,940 --> 00:02:10,260
‫And let's check it out.

48
00:02:10,260 --> 00:02:12,360
‫And indeed, it says open.

49
00:02:12,360 --> 00:02:14,190
‫And so again, the reason for that

50
00:02:14,190 --> 00:02:16,680
‫is the way the & operator works.

51
00:02:16,680 --> 00:02:19,620
‫So isOpen is currently true as we can see

52
00:02:19,620 --> 00:02:21,600
‫from this console.log here,

53
00:02:21,600 --> 00:02:23,760
‫and so then, since this is true,

54
00:02:23,760 --> 00:02:28,230
‫the second part of the & operator will be returned.

55
00:02:28,230 --> 00:02:30,390
‫Now, let's just change this here

56
00:02:30,390 --> 00:02:34,290
‫to say that the restaurant opens at 20 hours.

57
00:02:34,290 --> 00:02:36,210
‫Then, here we get false.

58
00:02:36,210 --> 00:02:39,750
‫And then down here, well, we basically get nothing.

59
00:02:39,750 --> 00:02:42,420
‫And so that is the short circuiting in action.

60
00:02:42,420 --> 00:02:46,230
‫So short circuiting means that if this condition,

61
00:02:46,230 --> 00:02:49,890
‫so if this value here is false or falsey,

62
00:02:49,890 --> 00:02:51,720
‫then the second part of the operation

63
00:02:51,720 --> 00:02:53,910
‫will not even be executed.

64
00:02:53,910 --> 00:02:56,100
‫So JavaScript will not even look at this

65
00:02:56,100 --> 00:02:58,560
‫and then nothing is rendered.

66
00:02:58,560 --> 00:03:01,290
‫So the result here is then true,

67
00:03:01,290 --> 00:03:02,730
‫which is the result of this,

68
00:03:02,730 --> 00:03:04,950
‫but the React doesn't actually render true

69
00:03:04,950 --> 00:03:07,170
‫or false into the DOM.

70
00:03:07,170 --> 00:03:09,300
‫And so that's why this works.

71
00:03:09,300 --> 00:03:12,300
‫So let me show that to you actually here very quick.

72
00:03:12,300 --> 00:03:14,730
‫So if we write false here,

73
00:03:14,730 --> 00:03:16,530
‫so a Boolean value,

74
00:03:16,530 --> 00:03:19,470
‫then you see it's not showing up here.

75
00:03:19,470 --> 00:03:22,890
‫And the same is true for true.

76
00:03:22,890 --> 00:03:24,393
‫So that's not there.

77
00:03:25,890 --> 00:03:30,393
‫Okay, let's just write something a bit nicer here like,

78
00:03:34,237 --> 00:03:36,813
‫"We're open until"

79
00:03:37,830 --> 00:03:41,680
‫and then here, let's read the closed hour

80
00:03:43,410 --> 00:03:45,393
‫and then format it just a little bit.

81
00:03:48,037 --> 00:03:53,037
‫"Come visit us or order online."

82
00:03:53,100 --> 00:03:54,630
‫And since we're already here,

83
00:03:54,630 --> 00:03:59,223
‫let's also create this small button that we have down here.

84
00:04:00,990 --> 00:04:03,210
‫Now, right now here we cannot see anything,

85
00:04:03,210 --> 00:04:05,790
‫so let's put the open hour back

86
00:04:05,790 --> 00:04:08,013
‫so that our restaurant is actually open.

87
00:04:09,630 --> 00:04:10,770
‫Nice.

88
00:04:10,770 --> 00:04:13,683
‫And now let's wrap this entire thing here into a diff.

89
00:04:15,660 --> 00:04:20,660
‫So diff with the class name of "order".

90
00:04:21,990 --> 00:04:23,800
‫Then let's wrap this here

91
00:04:25,500 --> 00:04:30,167
‫and then create a button with the class name of "btn" order.

92
00:04:32,040 --> 00:04:33,480
‫And then we get all the styles

93
00:04:33,480 --> 00:04:37,410
‫from the style sheet that we included at the beginning.

94
00:04:37,410 --> 00:04:38,970
‫Beautiful.

95
00:04:38,970 --> 00:04:41,310
‫Now just notice here that we're doing exactly

96
00:04:41,310 --> 00:04:45,150
‫what we learned in the lecture about the rules of JSX,

97
00:04:45,150 --> 00:04:46,230
‫and in particular,

98
00:04:46,230 --> 00:04:49,590
‫we are inside this JavaScript mode here

99
00:04:49,590 --> 00:04:52,290
‫returning some more JSX,

100
00:04:52,290 --> 00:04:53,700
‫which is perfectly fine.

101
00:04:53,700 --> 00:04:55,290
‫As we learned in the end,

102
00:04:55,290 --> 00:04:57,780
‫this is just a JavaScript expression as well.

103
00:04:57,780 --> 00:05:00,273
‫And so this is why this thing works.

104
00:05:01,380 --> 00:05:02,430
‫Nice.

105
00:05:02,430 --> 00:05:05,670
‫So this is a good use case of conditional rendering.

106
00:05:05,670 --> 00:05:07,920
‫Let's check out another one.

107
00:05:07,920 --> 00:05:11,490
‫So, let's say that we only want to render this menu here

108
00:05:11,490 --> 00:05:14,343
‫in case that we actually have some pizzas.

109
00:05:15,330 --> 00:05:16,470
‫So first of all,

110
00:05:16,470 --> 00:05:17,703
‫let's actually get,

111
00:05:19,530 --> 00:05:21,150
‫yeah, actually it's here.

112
00:05:21,150 --> 00:05:24,420
‫So basically, we only want to render this list

113
00:05:24,420 --> 00:05:26,523
‫in case that we have some pizzas.

114
00:05:27,690 --> 00:05:28,830
‫So to start,

115
00:05:28,830 --> 00:05:32,980
‫let's actually create a new variable here quickly

116
00:05:33,960 --> 00:05:35,790
‫which I will call pizzas

117
00:05:35,790 --> 00:05:38,397
‫and I will set it equal to pizzaData.

118
00:05:40,650 --> 00:05:42,393
‫And then here, let's use that.

119
00:05:45,210 --> 00:05:47,610
‫And then let's, pizzas.

120
00:05:47,610 --> 00:05:49,910
‫And then let's do conditional rendering again.

121
00:05:51,210 --> 00:05:55,020
‫So our first start in a way that's not really going to work

122
00:05:55,020 --> 00:05:57,510
‫but let's roll with it for now.

123
00:05:57,510 --> 00:05:59,253
‫So we can again, do pizzas.

124
00:06:01,003 --> 00:06:01,940
‫& and &.

125
00:06:03,330 --> 00:06:05,040
‫Well, then this.

126
00:06:05,040 --> 00:06:08,643
‫So let's cut that, paste it here,

127
00:06:09,990 --> 00:06:11,550
‫and there we go.

128
00:06:11,550 --> 00:06:13,650
‫And so our pizzas are still here

129
00:06:13,650 --> 00:06:16,440
‫because pizzas is a truthy value.

130
00:06:16,440 --> 00:06:18,750
‫And so this behavior of the & operator

131
00:06:18,750 --> 00:06:21,990
‫does not only work for true and false values,

132
00:06:21,990 --> 00:06:25,413
‫but also for truthy and falsey values.

133
00:06:26,640 --> 00:06:28,560
‫Now, the problem with this is

134
00:06:28,560 --> 00:06:33,000
‫that let's say that actually we have no pizzas.

135
00:06:33,000 --> 00:06:35,403
‫So pizzas equals an empty array.

136
00:06:37,410 --> 00:06:41,070
‫Well then, it actually appears as though this is empty here.

137
00:06:41,070 --> 00:06:42,630
‫But if we inspect,

138
00:06:42,630 --> 00:06:47,343
‫we see that the list itself should still be there.

139
00:06:48,870 --> 00:06:51,840
‫So you see, we have here the empty list.

140
00:06:51,840 --> 00:06:53,760
‫so it's empty because of course

141
00:06:53,760 --> 00:06:55,890
‫we have no pizzas to loop over,

142
00:06:55,890 --> 00:06:58,020
‫but UL is still here.

143
00:06:58,020 --> 00:07:00,600
‫So this here is still being rendered.

144
00:07:00,600 --> 00:07:04,530
‫And that's because an MT array is still a truthy value.

145
00:07:04,530 --> 00:07:07,320
‫So what we need to do here is to basically check

146
00:07:07,320 --> 00:07:09,213
‫for the length of this array.

147
00:07:10,170 --> 00:07:15,170
‫So let's do numPizzas=pizzas.length.

148
00:07:19,440 --> 00:07:20,273
‫All right.

149
00:07:20,273 --> 00:07:22,320
‫And so now when there are no pizzas,

150
00:07:22,320 --> 00:07:24,210
‫then this will become zero,

151
00:07:24,210 --> 00:07:26,163
‫and so if we check based on this,

152
00:07:28,290 --> 00:07:30,240
‫then this is now a falsey value.

153
00:07:30,240 --> 00:07:31,650
‫And so if it's false,

154
00:07:31,650 --> 00:07:34,650
‫then this here will not get rendered.

155
00:07:34,650 --> 00:07:36,900
‫So let's see what happens then.

156
00:07:36,900 --> 00:07:38,280
‫And...

157
00:07:38,280 --> 00:07:40,860
‫now we get this weird zero.

158
00:07:40,860 --> 00:07:42,813
‫Hmm, why is that?

159
00:07:43,800 --> 00:07:47,250
‫Well, it's because of short circuiting again.

160
00:07:47,250 --> 00:07:49,890
‫So when the & operator short circuits,

161
00:07:49,890 --> 00:07:52,320
‫it will simply not evaluate this part,

162
00:07:52,320 --> 00:07:54,600
‫but instead the result of the operation

163
00:07:54,600 --> 00:07:56,430
‫will become this one.

164
00:07:56,430 --> 00:07:57,720
‫So, this is zero,

165
00:07:57,720 --> 00:08:00,840
‫and so therefore that's what we get in the UI.

166
00:08:00,840 --> 00:08:03,000
‫That didn't happen down here

167
00:08:03,000 --> 00:08:04,320
‫because as I mentioned,

168
00:08:04,320 --> 00:08:08,130
‫React will not render true or false value

169
00:08:08,130 --> 00:08:11,070
‫but it will happily render a zero.

170
00:08:11,070 --> 00:08:12,723
‫And so that's why we get a zero.

171
00:08:13,830 --> 00:08:15,030
‫So as a conclusion,

172
00:08:15,030 --> 00:08:19,140
‫we should never, ever have this here as a number.

173
00:08:19,140 --> 00:08:21,180
‫So we should always try to have a true

174
00:08:21,180 --> 00:08:22,980
‫or false condition here.

175
00:08:22,980 --> 00:08:24,210
‫So let's do this.

176
00:08:24,210 --> 00:08:27,330
‫If there are more than zero pizzas, do this.

177
00:08:27,330 --> 00:08:30,390
‫And if not, while then don't render anything.

178
00:08:30,390 --> 00:08:33,963
‫And so this here is the result that we were looking for.

179
00:08:35,280 --> 00:08:38,250
‫Let's put it back just to see.

180
00:08:38,250 --> 00:08:40,593
‫And then our pizzas are actually back.

181
00:08:41,490 --> 00:08:42,630
‫Nice.

182
00:08:42,630 --> 00:08:46,200
‫Now because of this behavior here that I just showed you,

183
00:08:46,200 --> 00:08:49,620
‫so that sometimes a zero can show up in the UI,

184
00:08:49,620 --> 00:08:51,750
‫many people say that we should actually

185
00:08:51,750 --> 00:08:56,550
‫never use the & operator to do conditional rendering.

186
00:08:56,550 --> 00:08:58,650
‫Now I don't really agree with that

187
00:08:58,650 --> 00:09:01,650
‫because sometimes it's nice to very quickly

188
00:09:01,650 --> 00:09:03,960
‫do some conditional rendering with this,

189
00:09:03,960 --> 00:09:08,010
‫but also usually, I do prefer the ternary operator

190
00:09:08,010 --> 00:09:09,600
‫to do conditional rendering.

191
00:09:09,600 --> 00:09:13,203
‫And so that operator is up next in the next lecture.