1
00:00:01,112 --> 00:00:03,510
‫[Instructor Jonas] To finish this project let's learn

2
00:00:03,510 --> 00:00:07,650
‫how to conditionally set some text inside elements

3
00:00:07,650 --> 00:00:10,953
‫and also how to conditionally set class names.

4
00:00:12,600 --> 00:00:16,710
‫So if we take one final look at our final project

5
00:00:16,710 --> 00:00:19,620
‫the only difference is that this pizza here

6
00:00:19,620 --> 00:00:21,150
‫that is sold out

7
00:00:21,150 --> 00:00:24,780
‫has this text of sold out instead of the price.

8
00:00:24,780 --> 00:00:29,780
‫And the whole element here is kind of grayed out.

9
00:00:29,940 --> 00:00:32,550
‫So just to show that it's not available.

10
00:00:32,550 --> 00:00:34,683
‫And so let's now do that.

11
00:00:36,030 --> 00:00:38,430
‫So right now we have this line of code here

12
00:00:38,430 --> 00:00:41,040
‫which makes it so that is sold out pizza

13
00:00:41,040 --> 00:00:42,720
‫is not even displayed.

14
00:00:42,720 --> 00:00:45,750
‫So let's start by getting rid of that.

15
00:00:45,750 --> 00:00:49,620
‫And so now we are ready to conditionally display some text

16
00:00:49,620 --> 00:00:52,950
‫and we are going to do it right here.

17
00:00:52,950 --> 00:00:56,520
‫So the difference between what we did before is that

18
00:00:56,520 --> 00:01:00,927
‫before we did conditionally render this entire element here

19
00:01:00,927 --> 00:01:03,120
‫but now that's not what we want.

20
00:01:03,120 --> 00:01:07,260
‫Now we already know that we want this span element here

21
00:01:07,260 --> 00:01:09,180
‫but we don't want the content yet.

22
00:01:09,180 --> 00:01:12,120
‫And so let's now conditionally set that,

23
00:01:12,120 --> 00:01:13,740
‫and that's very easy.

24
00:01:13,740 --> 00:01:17,283
‫So once again, we are going to use our ternary operator.

25
00:01:19,500 --> 00:01:22,960
‫So let's say pizza object

26
00:01:24,120 --> 00:01:25,683
‫dot sold out,

27
00:01:27,240 --> 00:01:29,640
‫then the text here should be,

28
00:01:29,640 --> 00:01:32,490
‫and now what do you think we need here?

29
00:01:32,490 --> 00:01:35,283
‫Well, it's just a string actually.

30
00:01:36,420 --> 00:01:38,040
‫So, sold out.

31
00:01:38,040 --> 00:01:41,373
‫And if not, then we want the pizza's price.

32
00:01:42,270 --> 00:01:45,120
‫Give it a save and,

33
00:01:45,120 --> 00:01:48,330
‫yeah, nice, that worked.

34
00:01:48,330 --> 00:01:50,460
‫Let's just make it uppercase.

35
00:01:50,460 --> 00:01:52,290
‫It should be handled by the CSS,

36
00:01:52,290 --> 00:01:57,210
‫but we can also just do it like this now, right?

37
00:01:57,210 --> 00:02:00,060
‫So let's again appreciate the difference here.

38
00:02:00,060 --> 00:02:03,300
‫So we're not setting the element conditionally,

39
00:02:03,300 --> 00:02:05,520
‫which of course we could.

40
00:02:05,520 --> 00:02:08,940
‫Let's just quickly do that because why not?

41
00:02:08,940 --> 00:02:09,963
‫So we could say,

42
00:02:11,070 --> 00:02:13,500
‫if pizza object

43
00:02:13,500 --> 00:02:14,680
‫not sold out

44
00:02:17,790 --> 00:02:21,700
‫then display this span with sold out

45
00:02:23,550 --> 00:02:24,383
‫and if not

46
00:02:25,830 --> 00:02:29,530
‫then display the span with pizza

47
00:02:32,640 --> 00:02:34,473
‫dot price.

48
00:02:35,310 --> 00:02:37,800
‫So the result is going to be exactly the same

49
00:02:37,800 --> 00:02:39,660
‫as we see down here,

50
00:02:39,660 --> 00:02:42,570
‫but what we did is fundamentally different.

51
00:02:42,570 --> 00:02:45,720
‫So here we already know that we want a span element

52
00:02:45,720 --> 00:02:48,420
‫we just don't know yet the content.

53
00:02:48,420 --> 00:02:51,810
‫While here, we apparently also don't know yet

54
00:02:51,810 --> 00:02:53,670
‫what element we want.

55
00:02:53,670 --> 00:02:57,300
‫Though in both cases we are then using a span.

56
00:02:57,300 --> 00:03:00,180
‫And so I think it's a lot better to do it like this.

57
00:03:00,180 --> 00:03:04,020
‫So to conditionally set the text content of an element

58
00:03:04,020 --> 00:03:07,170
‫this is way cleaner in my opinion.

59
00:03:07,170 --> 00:03:10,833
‫But just for reference, I will leave this one here as well.

60
00:03:11,760 --> 00:03:16,110
‫Okay. And now finally, as for the class name,

61
00:03:16,110 --> 00:03:18,660
‫whenever the pizza is sold out,

62
00:03:18,660 --> 00:03:22,680
‫we can add the sold out class to the LI,

63
00:03:22,680 --> 00:03:25,410
‫which will then make it grayed out.

64
00:03:25,410 --> 00:03:27,391
‫Let me show that to you.

65
00:03:27,391 --> 00:03:29,763
‫You can simply add it to all of them.

66
00:03:31,110 --> 00:03:34,080
‫And so then you see this is the result we are going for,

67
00:03:34,080 --> 00:03:37,170
‫but of course we only want this part here

68
00:03:37,170 --> 00:03:40,083
‫whenever the pizza is actually sold out.

69
00:03:40,920 --> 00:03:45,000
‫So let's again use our ternary operator for that.

70
00:03:45,000 --> 00:03:46,890
‫So this is how we're going to do it.

71
00:03:46,890 --> 00:03:50,190
‫We will now use instead of a regular string,

72
00:03:50,190 --> 00:03:51,930
‫a template literal.

73
00:03:51,930 --> 00:03:55,440
‫So deleting the quote and deleting this.

74
00:03:55,440 --> 00:03:58,380
‫But now this is actually JavaScript.

75
00:03:58,380 --> 00:04:01,260
‫So a template literal is JavaScript

76
00:04:01,260 --> 00:04:04,023
‫therefore let's enter JavaScript mode.

77
00:04:04,950 --> 00:04:05,910
‫Give it a save.

78
00:04:05,910 --> 00:04:09,150
‫And so for now, it is exactly what we had before.

79
00:04:09,150 --> 00:04:13,620
‫But now inside this template literal, we can,

80
00:04:13,620 --> 00:04:16,380
‫well kind of enter the template literal

81
00:04:16,380 --> 00:04:19,230
‫JavaScript mode as well in this way.

82
00:04:19,230 --> 00:04:22,260
‫So remember that it's actually quite similar

83
00:04:22,260 --> 00:04:27,260
‫the idea then entering JavaScript mode inside of JSX, right?

84
00:04:28,230 --> 00:04:31,020
‫The difference here that in the template literal

85
00:04:31,020 --> 00:04:36,020
‫to add some piece of code we also need this one, right?

86
00:04:36,780 --> 00:04:38,850
‫So this dollar sign.

87
00:04:38,850 --> 00:04:41,010
‫But then here we can once again

88
00:04:41,010 --> 00:04:44,073
‫make use of our friend the ternary operator.

89
00:04:44,940 --> 00:04:48,400
‫So we can say pizza object

90
00:04:49,770 --> 00:04:50,733
‫sold out.

91
00:04:51,750 --> 00:04:56,713
‫If yes, then here give us the string of sold out.

92
00:04:58,110 --> 00:05:00,633
‫But if not, then just an empty string.

93
00:05:01,740 --> 00:05:03,840
‫And this should be enough.

94
00:05:03,840 --> 00:05:06,450
‫And yeah, beautiful.

95
00:05:06,450 --> 00:05:09,153
‫So this is exactly what we were going for.

96
00:05:10,320 --> 00:05:12,750
‫So let's recap why this worked.

97
00:05:12,750 --> 00:05:14,880
‫So we have our template literal,

98
00:05:14,880 --> 00:05:18,660
‫and then here we simply write a JavaScript expression.

99
00:05:18,660 --> 00:05:20,820
‫And so then with the ternary operator,

100
00:05:20,820 --> 00:05:24,630
‫we check if this exists and if so.

101
00:05:24,630 --> 00:05:26,040
‫So if this is true,

102
00:05:26,040 --> 00:05:29,760
‫then the result of this operator will be sold out.

103
00:05:29,760 --> 00:05:33,360
‫And so then this entire thing here becomes sold out.

104
00:05:33,360 --> 00:05:36,240
‫And then the string is exactly what we had before.

105
00:05:36,240 --> 00:05:39,210
‫So pizza space sold out.

106
00:05:39,210 --> 00:05:40,920
‫But if this is false,

107
00:05:40,920 --> 00:05:43,350
‫then we will simply return nothing here.

108
00:05:43,350 --> 00:05:45,600
‫So then the string is just pizza,

109
00:05:45,600 --> 00:05:49,533
‫which is well what we have here in all of these cases.

110
00:05:51,030 --> 00:05:52,980
‫So you see here the class is just pizza

111
00:05:54,210 --> 00:05:56,490
‫with the space of course that we have here,

112
00:05:56,490 --> 00:05:58,770
‫but that's no problem at all.

113
00:05:58,770 --> 00:06:01,830
‫And then here we have pizza sold out.

114
00:06:01,830 --> 00:06:04,650
‫Great. So this is how we conditionally set

115
00:06:04,650 --> 00:06:08,040
‫some CSS classes onto elements.

116
00:06:08,040 --> 00:06:11,370
‫So all without using the classless property

117
00:06:11,370 --> 00:06:14,580
‫that we would have to use in Vanilla JavaScript.

118
00:06:14,580 --> 00:06:18,630
‫And for this down here, remember in Vanilla JavaScript

119
00:06:18,630 --> 00:06:21,120
‫we would have to do some damage manipulation

120
00:06:21,120 --> 00:06:23,190
‫with the text content property

121
00:06:23,190 --> 00:06:26,310
‫or inner HTML or something like that.

122
00:06:26,310 --> 00:06:30,540
‫But here with the declarative nature of JSX and React

123
00:06:30,540 --> 00:06:33,210
‫everything becomes just a little bit easier

124
00:06:33,210 --> 00:06:35,040
‫and nicer to work with.

125
00:06:35,040 --> 00:06:37,620
‫And now just one final detail.

126
00:06:37,620 --> 00:06:41,310
‫Let's come here to our public folder.

127
00:06:41,310 --> 00:06:43,590
‫And in the index dot HTML

128
00:06:43,590 --> 00:06:47,220
‫we will want to set now the title of the document.

129
00:06:47,220 --> 00:06:50,730
‫So here we have Fast React Pizza Co.

130
00:06:50,730 --> 00:06:55,730
‫But here it just says default React Up, which is a bit ugly.

131
00:06:55,950 --> 00:07:00,783
‫So let's say Fast React Pizza Co.

132
00:07:02,040 --> 00:07:05,370
‫And that's it.

133
00:07:05,370 --> 00:07:08,460
‫So at this, we actually finished our application

134
00:07:08,460 --> 00:07:10,500
‫and our very first project.

135
00:07:10,500 --> 00:07:14,010
‫So congratulations for making it all the way here

136
00:07:14,010 --> 00:07:17,310
‫until the end of this long section.

137
00:07:17,310 --> 00:07:19,560
‫And now just to finish this section

138
00:07:19,560 --> 00:07:22,080
‫we will have a lecture to review everything

139
00:07:22,080 --> 00:07:25,380
‫that we just learned because it was a lot.

140
00:07:25,380 --> 00:07:26,640
‫And then finally,

141
00:07:26,640 --> 00:07:29,700
‫there is another coding challenge waiting for you

142
00:07:29,700 --> 00:07:32,850
‫just so you can practice again what you learned here

143
00:07:32,850 --> 00:07:35,040
‫over the last few lectures.

144
00:07:35,040 --> 00:07:38,130
‫But before going there, I would invite you to once again

145
00:07:38,130 --> 00:07:41,760
‫check out the entire code that we wrote here together

146
00:07:41,760 --> 00:07:44,820
‫see how all the components are related

147
00:07:44,820 --> 00:07:46,680
‫and really check out again

148
00:07:46,680 --> 00:07:49,410
‫everything that you learned even before checking out

149
00:07:49,410 --> 00:07:52,200
‫that summary lecture that's going to follow.

150
00:07:52,200 --> 00:07:53,970
‫And then after that, of course,

151
00:07:53,970 --> 00:07:57,603
‫watch that lecture to really drive the message home.