Alright, guys. It's time to flex your React programming muscles and put into practice everything
that you learned in the previous lesson.
The idea here is to use conditional rendering to show different components depending on a particular
variable. And that variable is one called userIsRegistered which lives inside the App.js.
So the idea here is that when the user tries to authenticate themselves with your website, and they enter
their username and password, it might be that the database recognizes that username and password in
which case this becomes true,
but it might also be that they don't actually exist on our database and they've never registered before,
so userIsRegistered becomes false. And depending on the value of this condition we want to do a couple
of things.
If the user is indeed registered, then we want to show them a Login screen, but if they're not registered
on our database then we want to show them a Register screen.
Now, if we're showing them the Register screen, then we actually want to show them this, Confirm Password,
field because when they register, they should probably type their password twice in order to validate
it,
but if it's just the Login screen, then we don't actually want to show this.
So this is the final functionality you're aiming for. When the userIsRegistered is set to false,
you see a Register screen with Username and Password, Confirm Password, and the button says, Register. When
the userIsRegistered is set to true, then you see a Login screen with just Username, Password, and the
button says, Login.
Go ahead and fork
the starting project for this challenge and try to go through the steps and complete it. Pause the video
now and come back if you need to see me walk through the solution with you.
All right.
So the first thing we're trying to do is to show the word Login as the button text
if userIsRegistered is true. At the moment if we look inside our Form.jsx, we've got this text
here saying Register, and we want to switch up that text depending on the value of our userIsRegistered
variable. But unfortunately, this lives inside App.js and I mentioned that you can't move that variable.
So how do you get it over to the Form?
Well, you can of course pass it over as a prop. So let's create a prop called isRegistered and we'll set
it to equal the value of this variable,
userIsRegistered. So frequently when you're rendering things conditionally, you're going to be doing
it via props that have been passed over.
So now inside our Form component, we can receive those props and check for it in order to render something
different inside our button.
In this case, what we want to do is we want to check to see if props.isRegistered, to make sure
that I spell it right, is true, and if so, we're going to show the word Login, but otherwise we're going
to show the word, Register. And this is not being highlighted properly because we haven't yet wrapped
it inside a set of curly braces.
Now when we go back to our App.js and we switch this variable from false to true, you'll see that
that goes to Login, and then when it's false
and when we go back, it goes back to Register.
So that's step 1 completed.
Now step 2 is to only show the confirm password input,
so this one, if the userIsRegistered variable is false.
Remember that when we have a Register screen, we want to have the, "Confirm Password" input,
but when we have a Login screen, we don't want to have that field showing at all.
How can we do this?
Well we know that we receive
this isRegistered value as a prop inside our Form,
so we can determine whether if this input actually gets rendered or not.
And the most efficient way of doing this is through using the AND operator.
Let's open up a set of parentheses and check if props.isRegistered is equal to false. And if so,
so two ampersands, then we're going to render this Input component,
but if it's not false i.e. if this is true, then we're not going to render anything at all.
Now let's go ahead and test this out.
So when this is false, we see the Register screen with that extra Confirm Password field, but if this
is true, then we see the Login screen without that extra input. There's quite a few ways that you could
have done this,
you could have for example, used a ternary operator instead.
So you can add a question mark here to check this condition, render this if it's true, and then render
null
if it's not true. And this gives you the same effect. But of course if you're after the shortest possible
way of creating this kind of conditional rendering, then it's going to be through the use of the ampersand
operator. And that means we get to delete the null and all of the extra syntax,
and in fact you can even change this prop.isRregistered equals to false, to a more simple form
just adding an exclamation mark in front.
So this basically turns this value to the opposite of what it used to be,
and it's effectively the same as checking if isRegistered is false.
And then we end up with a one line statement that does everything we want.
Did you manage to get this challenge right?
If not, be sure to head back to your own code and try to complete it
now that you've watched the video. We're going to be using this concept of conditional rendering a lot
in the coming lessons
and it's a really fundamental part of React. So be sure that you're really comfortable with it before
you move on.
All right.
In the next lesson, we're going to be talking about a big topic which is State, and how we can track and
change state in our apps.
So for all of that and more, I'll see you there.