Alright guys. it's time to flex your React programming muscles and put into practice everything 1
that you learned in the previous lesson. 2
The idea here is to use conditional rendering to show different components depending on a particular 3
variable. And that variable is one called userIsRegistered which lives inside the App.js. 4
So the idea here is that when the user tries to authenticate themselves with your website and they enter 5
their username and password, it might be that the database recognizes that username and password in 6
which case this becomes true. 7
But it might also be that they don't actually exist on our database and they've never registered before 8
so userIsRegistered becomes false. And depending on the value of this condition we want to do a couple 9
of things. 10
If the user is indeed registered, then we want to show them a login screen. But if they're not registered 11
on our database then we want to show them a register screen. 12
Now if we're showing them the register screen, then we actually want to show them this confirm password 13
field because when they register, they should probably type their password twice in order to validate 14
it. 15
But if it's just the login screen, then we don't actually want to show this. 16
So this is the final functionality you're aiming for. When the userIsRegistered is set to false, 17
you see a register screen with username, password confirm password and the button says register. When 18
the userIsRegistered is set to true, then you see a login screen with just username, password and the 19
buttons as login. 20
Go ahead and fork 21
the starting project for this challenge and try to go through the steps and complete it. Pause the video 22
now and come back if you need to see me walk through the solution with you. 23
All right. 24
So the first thing we're trying to do is to show the word login as the button text 25
If userIsRegistered is true. At the moment if we look inside our form.jsx, we've got this text 26
here saying register and we want to switch up that text depending on the value of our userIsRegistered 27
variable. But unfortunately this lives inside App.js and I mentioned that you can't move that variable. 28
So how do you get it over to the form? 29
Well, you can of course pass it over as a prop. So let's create a prop called isRegistered and we'll set 30
it to equal the value of this variable, 31
userIsRegistered. So frequently when you're rendering things conditionally, you're going to be doing 32
it via props that have been passed over. 33
So now inside our form component, we can receive those props and check for it in order to render something 34
different inside our button. 35
In this case what we want to do is we want to check to see if props.isRegistered, to make sure 36
that I spell it right, is true. And if so we're going to show the word login, but otherwise we're going 37
to show the word register. And this is not being highlighted properly because we haven't yet wrapped 38
it inside a set of curly braces. 39
Now when we go back to our App.js and we switch this variable from false to true, you'll see that 40
that goes to login and then when it's false 41
and when we go back, it goes back to register. 42
So that's step 1 completed. 43
Now step 2 is to only show the confirm password input, 44
so this one, if the userIsRegistered variable is false. 45
Remember that when we have a register screen, we want to have the confirm password input. 46
But when we have a login screen, we don't want to have that field showing at all. 47
How can we do this? 48
Well we know that we receive 49
this isRegistered value as a prop inside our form. 50
So we can determine whether if this input actually gets rendered or not. 51
And the most efficient way of doing this is through using the AND operator. 52
Let's open up a set of parentheses and check if props.isRegistered is equal to false. And if so 53
so two ampersands, then we're going to render this input component. 54
But if it's not false i.e. if this is true, then we're not going to render anything at all. 55
Now let's go ahead and test this out. 56
So when this is false, we see the register screen with that extra confirm password field. But if this 57
is true, then we see the login screen without that extra input. There's quite a few ways that you could 58
have done this. 59
You could have for example used a ternary operator instead. 60
So you can add a question mark here to check this condition, render this if it's true and then render 61
null 62
if it's not true. And this gives you the same effect. But of course if you're after the shortest possible 63
way of creating this kind of conditional rendering, then it's going to be through the use of the ampersand 64
operator. And that means we get to delete the null and all of the extra syntax. 65
And in fact you can even change this prop.iRregistered equals to false to a more simple form 66
just adding an exclamation mark in front. 67
So this basically turns this value to the opposite of what it used to be 68
and it's effectively the same as checking if isRegistered is false. 69
And then we end up with a one line statement that does everything we want. 70
Did you manage to get this challenge right? 71
If not be sure to head back to your own code and try to complete it 72
now that you've watched the video. We're going to be using this concept of conditional rendering a lot 73
in the coming lessons 74
and it's a really fundamental part of React. So be sure that you're really comfortable with it before 75
you move on. 76
All right. 77
In the next lesson, we're going to be talking about a big topic which is state and how we can track and 78
change state in our apps. 79
So for all of that and more, I'll see you there.