1

00:00:00,450 --> 00:00:07,860

2
00:00:07,860 --> 00:00:14,070
these kind of screens you'll want to show different components depending on whether
the user was logged

3
00:00:14,070 --> 00:00:16,140
in or if they were logged out.

4
00:00:16,140 --> 00:00:21,870
So for example, if they were not logged in and they go to your website you probably
want to show them

5
00:00:21,960 --> 00:00:24,150
the login screen like this.

6
00:00:24,150 --> 00:00:31,560
But if they were logged in then maybe you would want to instead show a different
message or a different

7
00:00:31,560 --> 00:00:32,689
component.

8
00:00:32,910 --> 00:00:34,760
And that's the goal of this lesson.

9
00:00:34,800 --> 00:00:41,760
We're going to learn the techniques to show different React components depending on
some sort of condition.

10
00:00:41,880 --> 00:00:48,690
In this example when the user is not logged in, we show them the login form and if
they are, we simply

11
00:00:48,690 --> 00:00:50,760
just greet them.

12
00:00:50,760 --> 00:00:52,170
This is what we're going to be building

13
00:00:52,200 --> 00:00:58,940
so head over to the course resources and get hold of the starting sandbox and then
fork it.
14
00:00:59,340 --> 00:00:59,640
All right.

15
00:00:59,670 --> 00:01:06,540
So if we take a look inside the components folder you can see that there is a
single App.js. And

16
00:01:06,570 --> 00:01:15,210
let's say that we had at the top here a variable right? Called isLoggedIn and we
set it to false to begin.

17
00:01:15,210 --> 00:01:23,460
And once the user goes through authentication, then this variable gets switched to
true.

18
00:01:23,530 --> 00:01:31,330
So what we want is we want to check the value of this boolean, isLoggedIn, and if
it was true we'd render

19
00:01:31,390 --> 00:01:36,030
this and if was false we render this form.

20
00:01:36,100 --> 00:01:38,510
So how can we do this?

21
00:01:38,530 --> 00:01:46,170
Have a think about how you might be to able achieve this with what you already
know. You might have thought

22
00:01:46,230 --> 00:01:47,830
of creating a function

23
00:01:47,850 --> 00:01:48,180
right?

24
00:01:48,240 --> 00:01:58,920
So let's call it renderConditionally and this function is going to check to see if
the isLoggedIn

25
00:01:58,980 --> 00:02:01,020
is equal to true.

26
00:02:01,140 --> 00:02:06,720
But because this is simply a boolean which is equal to false or true, there's
actually no point adding
27
00:02:06,720 --> 00:02:10,560
this and we can simply just check it like so.

28
00:02:10,560 --> 00:02:17,490
But I'll leave it in for now to make it very very clear that we're checking for a
condition here. If

29
00:02:17,580 --> 00:02:19,080
logged in is true,

30
00:02:19,110 --> 00:02:23,940
well in this case we're going to return a component

31
00:02:23,940 --> 00:02:24,210
right?

32
00:02:24,210 --> 00:02:27,980
So I'm just going to cut that out from there and then return it here.

33
00:02:28,650 --> 00:02:36,420
But else namely if they are not logged in or if this is equal to false, then we're
going to return this

34
00:02:36,480 --> 00:02:48,620
form component instead, like so. And then inside our div let's just make it a non
self closing div.

35
00:02:48,790 --> 00:02:54,490
So sometimes when you hit save and code sandbox it does these automatic formats
which can be helpful

36
00:02:54,520 --> 00:02:56,250
but sometimes it's not.

37
00:02:57,160 --> 00:03:02,860
And inside this div I'm going to open up a set of JSX curly braces and I'm going to
call my function

38
00:03:03,220 --> 00:03:08,230
renderConditionally. And then add the parentheses to actually call it.

39
00:03:08,260 --> 00:03:14,870
So now if we take a look at our website it shows the which is meant to say hello.

40
00:03:15,070 --> 00:03:18,770
And this is because our isLoggedIn variable is set to true.

41
00:03:18,820 --> 00:03:25,990
Now if I set it to false you can see immediately instead of that we end up with our
username, password

42
00:03:26,110 --> 00:03:28,390
and login form.

43
00:03:28,480 --> 00:03:35,470
So this is one way of achieving this but you can see we're doing it in quite a lot
of lines of code

44
00:03:35,500 --> 00:03:36,200
right?

45
00:03:36,250 --> 00:03:43,150
And it's not the most elegant. Given that this is probably something we're going to
be doing quite frequently

46
00:03:43,150 --> 00:03:49,930
in React checking the value of a particular property and then rendering different
components depending

47
00:03:49,930 --> 00:03:51,820
on the value of that property,

48
00:03:51,850 --> 00:03:55,970
there's some better ways that we can do this to begin.

49
00:03:55,990 --> 00:04:03,760
It probably makes sense to extract this form component into a separate component by
itself instead of

50
00:04:03,760 --> 00:04:08,210
leaving it as just plain HTML. Because this can be reused

51
00:04:08,380 --> 00:04:15,400
and the thing you should always think about is that each component should have a
single responsibility.

52
00:04:15,400 --> 00:04:20,380
And this comes from something called the single responsibility principle which is
something that's quite

53
00:04:20,380 --> 00:04:25,930
central to computer programming. I'll link to this Wikipedia article if you want to
read a bit more about

54
00:04:25,930 --> 00:04:26,070
it.

55
00:04:26,440 --> 00:04:33,070
But once you're done let's head back into our sandbox. And I want to challenge you
to create a new component

56
00:04:33,280 --> 00:04:39,700
called login which is going to contain this entire form component and then create a
another component

57
00:04:39,700 --> 00:04:44,740
called input which is going to contain each of these input components.

58
00:04:44,740 --> 00:04:49,060
Remember that the inputs have different attributes with different values

59
00:04:49,180 --> 00:04:54,840
so you might want to use some props and make sure that you can reuse your input
component.

60
00:04:54,960 --> 00:04:57,220
Pause the video and try to complete this challenge.

61
00:05:01,950 --> 00:05:02,280
All right.

62
00:05:02,320 --> 00:05:06,040
So it's always good getting more practice and getting more used to the syntax.

63
00:05:06,460 --> 00:05:12,320
Let's go ahead and start off by creating a new file and I'm gonna call that login.

64
00:05:12,670 --> 00:05:20,350
jsx. And inside this file I'm going to import React from react and then I'm going
to create my function

65
00:05:20,410 --> 00:05:21,580
called Log in

66
00:05:22,060 --> 00:05:27,180
and this is going to return that form component that we had from over here.
67
00:05:27,310 --> 00:05:30,450
So cut it out from the App.

68
00:05:30,580 --> 00:05:35,350
jsx and finally we're going to export this as the default.

69
00:05:38,070 --> 00:05:38,460
Now

70
00:05:38,500 --> 00:05:46,670
let me head back into my App.jsx, import my Login from ./Login and instead of
returning

71
00:05:46,670 --> 00:05:52,730
that previous long thing, I'm going to simply return a Login component.

72
00:05:52,880 --> 00:05:59,910
That's the first step completed and I've extracted the Login component as a
separate component.

73
00:06:00,030 --> 00:06:08,730
Then the next thing was to extract an input component so that we can reuse each of
these inputs. So let's

74
00:06:08,760 --> 00:06:18,110
add the boilerplate. And this input component is going to return one of these
inputs from my form.

75
00:06:18,110 --> 00:06:30,460
like so. And then let's go ahead and export it and import it inside my Login. So
now instead of using

76
00:06:30,520 --> 00:06:38,350
each of these separate input HTML component, I'm going to use my input component
that I created

77
00:06:38,350 --> 00:06:39,410
myself.

78
00:06:39,730 --> 00:06:43,560
And we have two inputs currently that we want to render.

79
00:06:43,570 --> 00:06:45,040
One has a type of text,

80
00:06:45,040 --> 00:06:46,900
the other has a type of password.

81
00:06:46,900 --> 00:06:50,740
One has a place holder of username and the other has a placeholder password.

82
00:06:50,830 --> 00:06:54,530
So both of these attributes have different values that we need.

83
00:06:54,550 --> 00:06:57,780
So it makes sense to create those as props.

84
00:06:57,970 --> 00:07:07,250
So we'll create a prop called type and we'll create a prop called placeholder. Now
the type for my first

85
00:07:07,310 --> 00:07:14,660
input is going to be text and the placeholder is going to be Username. And then I'm
going to have a

86
00:07:14,660 --> 00:07:21,540
second input which has a type of password and a placeholder of password as well.

87
00:07:21,650 --> 00:07:29,780
So now I can go into my input component, catch those props that's being passed
over, delete the repeated

88
00:07:29,810 --> 00:07:34,040
elements and then change my type to use the prop.

89
00:07:34,280 --> 00:07:43,420
So add my curly braces and use my props.type and my props.placeholder.

90
00:07:43,690 --> 00:07:51,400
Now if we refresh our website, it should look exactly the same. But we've now
separated our concerns so

91
00:07:51,400 --> 00:07:57,350
that we have the input component which just deals with each of these input fields,
we've got our log

92
00:07:57,350 --> 00:08:04,060
in component which has an entire login form and then we've got our App.js which has
our conditional

93
00:08:04,060 --> 00:08:05,620
functionality.

94
00:08:05,860 --> 00:08:10,350
Now our code is a little bit shorter but not much.

95
00:08:10,660 --> 00:08:16,860
One of the things I want to do is I want to be able to carry out this functionality
inline,

96
00:08:16,900 --> 00:08:21,550
so at the place where I need it to be rendered namely pretty much here.

97
00:08:22,060 --> 00:08:28,780
But notice how if I go ahead and delete where I call my function
renderConditionally, and instead I

98
00:08:28,780 --> 00:08:32,179
copy and paste my IF statement into here,

99
00:08:32,409 --> 00:08:34,299
it's not going to work.

100
00:08:34,539 --> 00:08:36,309
I get an error.

101
00:08:36,309 --> 00:08:43,570
And the problem is that remember when we use JSX, everything that goes inside these
curly braces must

102
00:08:43,690 --> 00:08:45,590
be an expression.

103
00:08:45,790 --> 00:08:48,060
And this is not an expression.

104
00:08:48,070 --> 00:08:49,550
This is a statement.

105
00:08:49,600 --> 00:08:56,620
So if you recall back when we first introduced JSX, I recommended watching a video
which explained

106
00:08:56,620 --> 00:09:03,700
the difference between expressions and statements. Statements perform some sort of
action and common
107
00:09:03,700 --> 00:09:08,490
examples of statements include loops, switch statements or if else statements.

108
00:09:08,560 --> 00:09:16,030
Think about the ones which have a keyword. In contrast an expression just resolves
to a single value.

109
00:09:16,180 --> 00:09:21,910
Wouldn't it be nice if we could convert our if else statement into an expression so
that we can use

110
00:09:21,910 --> 00:09:22,820
it here?

111
00:09:22,930 --> 00:09:29,170
If only we had an expression in our JSX that still has the same logic namely
checking if our users

112
00:09:29,170 --> 00:09:30,970
logged in or not.

113
00:09:30,970 --> 00:09:35,380
Well luckily for us Javascript has something called the ternary operator.

114
00:09:35,380 --> 00:09:38,880
The ternary operator looks something like this.

115
00:09:39,100 --> 00:09:47,830
It's got a condition which we define such as is sky == to blue? Or in our case, is
that variable

116
00:09:47,950 --> 00:09:50,010
isLoggedIn equal to true?

117
00:09:50,290 --> 00:09:57,160
And then we have a question mark and after the question mark we say we'll do this
if it's true such

118
00:09:57,160 --> 00:10:07,120
as render the . And then after a colon, we get to specify what it should do if the
condition was false

119
00:10:07,390 --> 00:10:13,190
such as rendering our input component. So for example I live in London.

120
00:10:13,250 --> 00:10:17,180
So whenever it's cloudy it's probably going to rain.

121
00:10:17,750 --> 00:10:25,730
So internally I probably have a ternary operator in my brain which says if isCloudy
is true then bring

122
00:10:25,730 --> 00:10:26,750
an umbrella,

123
00:10:26,750 --> 00:10:34,410
otherwise bring sunscreen. So the syntax comprises of the question mark and the
colon and putting the

124
00:10:34,440 --> 00:10:38,690
conditions and the expressions in the right places.

125
00:10:39,180 --> 00:10:43,230
And that really is the beauty of the syntax. Instead of a statement

126
00:10:43,290 --> 00:10:49,710
we now have three expressions. The condition is an expression, bring umbrella is an
expression and bring

127
00:10:49,710 --> 00:10:52,410
sunscreen is also an expression.

128
00:10:52,410 --> 00:10:56,850
Therefore the whole thing is also just an expression.

129
00:10:56,850 --> 00:10:59,750
Let's go ahead and have some practice with this.

130
00:11:00,030 --> 00:11:06,780
In our case the condition is this one right here that we're checking in our IF
statement. And then the

131
00:11:06,780 --> 00:11:10,880
thing to do if it's true is to create an .

132
00:11:11,100 --> 00:11:18,180
And the thing to do if it's false is to create a login component. We can refactor
this IF statement

133
00:11:18,330 --> 00:11:21,210
into a ternary operator like this.
134
00:11:21,210 --> 00:11:28,590
First we have our condition which is being checked which is this one right here and
then we add a question

135
00:11:28,590 --> 00:11:29,400
mark.

136
00:11:29,520 --> 00:11:34,470
Effectively you could read this as, "isLoggedIn true?

137
00:11:34,580 --> 00:11:45,780
Well if so then let's create an component." And then we add a colon which means
everything that comes

138
00:11:45,900 --> 00:11:47,810
after the colon is what to do

139
00:11:47,850 --> 00:11:49,170
if it's false.

140
00:11:49,170 --> 00:11:53,560
So return a login component instead.

141
00:11:53,640 --> 00:12:03,700
And now if I simplify this and bring it all onto one line then you can see it looks
like this. If is

142
00:12:03,700 --> 00:12:08,190
LoggedIn equals true, render in h1.

143
00:12:08,240 --> 00:12:13,240
If login is not true then render the login component.

144
00:12:13,730 --> 00:12:20,070
So if I switch this now to a true, you'll see I get the h1 being rendered instead.

145
00:12:20,180 --> 00:12:27,440
And if this was false then it starts rendering that login component. And in fact I
can simplify this

146
00:12:27,680 --> 00:12:31,160
even more because this itself is a boolean.

147
00:12:31,610 --> 00:12:38,680
We can simply evaluate whether if this is true or false and we don't even need this
check.

148
00:12:38,840 --> 00:12:44,750
So try it out yourself and see this ternary operator in action. Now

149
00:12:44,770 --> 00:12:51,190
sometimes you might not want to render anything at all if a condition is not being
met.

150
00:12:51,190 --> 00:12:59,560
Let's say we create a constant called currentTime and we set that equal to new date
which gets the current

151
00:12:59,650 --> 00:13:04,000
date and time and then we call that function getHours.

152
00:13:04,000 --> 00:13:13,500
And this if we log it, should now be equal to the current time. So in my console
it's reading 13 because

153
00:13:13,500 --> 00:13:15,270
it's 1 o'clock.

154
00:13:15,270 --> 00:13:21,680
Now let's say I wanted to show the user a message depending on that time.

155
00:13:21,810 --> 00:13:27,060
I'm gonna go ahead and comment out this line of code which you can keep around for
reference. But what

156
00:13:27,060 --> 00:13:35,640
I want to do is let's say if the current time was after 12 o'clock, if current time
was greater than

157
00:13:35,700 --> 00:13:36,050
12,

158
00:13:36,060 --> 00:13:36,360
right?

159
00:13:36,390 --> 00:13:38,860
So right now it's 1 o'clock.

160
00:13:39,210 --> 00:13:44,420
Then I'm going to ask the user, "why are you still working?" So let's say I want to
show this h1

161
00:13:44,520 --> 00:13:47,370
"Why are you still working?"

162
00:13:47,550 --> 00:13:53,280
And I wanted to show it as long as the time is past 12 o'clock.

163
00:13:53,850 --> 00:13:56,090
Clearly we're not working very hard here, are we?

164
00:13:56,970 --> 00:13:59,340
So how do I do this?

165
00:13:59,340 --> 00:14:06,070
Well I could check to see if the current time is greater than 12,

166
00:14:06,090 --> 00:14:07,880
this is my condition.

167
00:14:08,040 --> 00:14:17,340
In that case, so add the question mark, I'm going to render this h1. But if it is
less than 12 then

168
00:14:17,430 --> 00:14:19,070
I don't want to show anything at all.

169
00:14:19,350 --> 00:14:25,090
So I could achieve that by simply adding that colon which defines what it should do

170
00:14:25,110 --> 00:14:30,010
if this condition is false and I'm going to show nothing at all.

171
00:14:30,150 --> 00:14:31,930
I'm gonna set it as null.

172
00:14:32,010 --> 00:14:46,230
So if I set my date to, I dunno, 2019 November the first at let's say 9 am.

173
00:14:46,680 --> 00:14:53,610
Then it's not going to show anything on screen because this condition is not met.
But as soon as the

174
00:14:53,610 --> 00:14:57,570
time changes to past 12, let's say 18,
175
00:14:57,570 --> 00:15:02,040
then it says "Why are you still working?" This way

176
00:15:02,040 --> 00:15:08,460
we're able to render a component if this condition is met and render nothing

177
00:15:08,460 --> 00:15:14,790
if that condition is not met. But there's actually an even easier way and a shorter
way

178
00:15:14,820 --> 00:15:24,360
using Javascript. And it involves the AND operator. We know that we can use the two
ampersands in Javascript

179
00:15:24,750 --> 00:15:32,820
like this where we have expression and another expression. When they're both
evaluated if they're both

180
00:15:32,820 --> 00:15:38,840
true, then this entire line of code turns into the value true.

181
00:15:38,880 --> 00:15:45,110
Now let's say that I had a variable which was x. x happens to be equal to 5

182
00:15:45,120 --> 00:15:46,690
at this moment in time.

183
00:15:47,010 --> 00:15:54,630
Now if I was to use this syntax expression and expression then it might look
something like this. Where

184
00:15:54,630 --> 00:16:03,020
I'm checking if x is greater than 3 and x is less than 7, then go ahead and do
something.

185
00:16:03,300 --> 00:16:08,050
And if one of these is not true, then don't do anything at all.

186
00:16:08,070 --> 00:16:09,890
This is usually how you would use the

187
00:16:09,990 --> 00:16:14,940
AND operator in JavaScript code as well as other languages.

188
00:16:14,970 --> 00:16:22,380
Now this case is easy because when x is 5, 5 is both greater than 3 and less than 7

189
00:16:22,410 --> 00:16:31,620
so this overall expression evaluates to true. But what happens if x was equal to 1
instead?

190
00:16:31,970 --> 00:16:36,010
Well 1 is not greater than 3.

191
00:16:36,470 --> 00:16:39,830
So that first expression is already false.

192
00:16:39,830 --> 00:16:47,330
And so to save time, Javascript doesn't even bother evaluating the next expression
because as long as

193
00:16:47,390 --> 00:16:55,640
one of the expressions is false where an AND operator is in use, then the whole
line is equivalent to

194
00:16:55,640 --> 00:16:56,930
false.

195
00:16:57,110 --> 00:17:03,800
So a lot of React code leverages this fact and we end up with something that looks
like this. On the

196
00:17:03,800 --> 00:17:04,640
left hand side

197
00:17:04,670 --> 00:17:10,670
we can have a condition and then we have the two ampersands for the AND operator,
and then on the right

198
00:17:10,670 --> 00:17:18,349
hand side we have an expression which will be evaluated as long as the condition is
true.

199
00:17:18,349 --> 00:17:23,770
But if the condition was false then it's not going to evaluate the right hand side
at all,

200
00:17:23,839 --> 00:17:29,750
so it's not going to be carried out. As an example over here

201
00:17:29,810 --> 00:17:38,210
instead of using this ternary operator and passing null when this condition is
false, we can simply delete

202
00:17:38,210 --> 00:17:42,870
the ternary operator and just add two ampersands here.

203
00:17:42,890 --> 00:17:45,290
This does exactly the same thing.

204
00:17:45,320 --> 00:17:46,920
Let me explain why.

205
00:17:47,100 --> 00:17:55,400
So the current time is 18 hours or 6PM. When the code runs down to this line, it
checks 'is 18 greater

206
00:17:55,400 --> 00:17:56,070
than 12?'

207
00:17:56,660 --> 00:17:58,660
Well that's obviously true.

208
00:17:58,700 --> 00:18:02,560
So it goes ahead and evaluates the right hand side of the

209
00:18:02,570 --> 00:18:10,950
AND operator. And this line of code actually gets carried out and put onto the
screen. And in React

210
00:18:10,970 --> 00:18:17,750
that means it gets rendered. But if this left hand side of the ampersand was false,
let's turn this to

211
00:18:17,750 --> 00:18:19,120
9 o'clock again.

212
00:18:19,370 --> 00:18:24,380
But because the AND operator requires both sides to be true,

213
00:18:24,380 --> 00:18:29,550
if the left hand side is already false then there's no point even looking at the
right hand side.

214
00:18:29,720 --> 00:18:34,650
So this right hand side basically gets skipped. And in React
215
00:18:34,760 --> 00:18:37,040
that means nothing gets rendered

216
00:18:37,340 --> 00:18:44,660
which is the same as null. Depending on your own level of comfort with this line of
code

217
00:18:44,720 --> 00:18:47,360
you can choose to use it but you don't have to.

218
00:18:47,360 --> 00:18:53,110
You can achieve the same thing using the ternary operator and a null for the false
condition.

219
00:18:53,390 --> 00:18:58,400
But out in the wild when you see a lot of React code, you'll see people using this
a lot.

220
00:18:58,400 --> 00:18:59,670
Don't get confused.

221
00:18:59,780 --> 00:19:03,400
They're not trying to check if these things are both true.

222
00:19:03,440 --> 00:19:07,910
They're actually trying to render something only when this left hand side condition
is true.

223
00:19:09,060 --> 00:19:09,540
All right.

224
00:19:09,560 --> 00:19:15,470
So now that you've seen the theory, in the next lesson you're going to be applying
it yourself and tackling

225
00:19:15,770 --> 00:19:21,400
a challenge to be able to use the ternary operator and the AND operator.

226
00:19:22,130 --> 00:19:24,620
So all of that and more, I'll see you there.