WEBVTT 0 00:00.320 --> 00:06.510 Alright guys. it's time to flex your React programming muscles and put into practice everything 1 00:06.510 --> 00:08.690 that you learned in the previous lesson. 2 00:08.700 --> 00:15.330 The idea here is to use conditional rendering to show different components depending on a particular 3 00:15.330 --> 00:22.110 variable. And that variable is one called userIsRegistered which lives inside the App.js. 4 00:22.410 --> 00:28.440 So the idea here is that when the user tries to authenticate themselves with your website and they enter 5 00:28.440 --> 00:35.220 their username and password, it might be that the database recognizes that username and password in 6 00:35.220 --> 00:37.860 which case this becomes true. 7 00:38.130 --> 00:43.290 But it might also be that they don't actually exist on our database and they've never registered before 8 00:43.350 --> 00:49.500 so userIsRegistered becomes false. And depending on the value of this condition we want to do a couple 9 00:49.500 --> 00:50.630 of things. 10 00:50.760 --> 00:57.510 If the user is indeed registered, then we want to show them a login screen. But if they're not registered 11 00:57.510 --> 01:00.880 on our database then we want to show them a register screen. 12 01:00.900 --> 01:07.980 Now if we're showing them the register screen, then we actually want to show them this confirm password 13 01:07.980 --> 01:13.260 field because when they register, they should probably type their password twice in order to validate 14 01:13.260 --> 01:13.810 it. 15 01:13.980 --> 01:19.250 But if it's just the login screen, then we don't actually want to show this. 16 01:19.260 --> 01:24.570 So this is the final functionality you're aiming for. When the userIsRegistered is set to false, 17 01:24.600 --> 01:31.470 you see a register screen with username, password confirm password and the button says register. When 18 01:31.470 --> 01:38.250 the userIsRegistered is set to true, then you see a login screen with just username, password and the 19 01:38.250 --> 01:40.530 buttons as login. 20 01:40.710 --> 01:42.100 Go ahead and fork 21 01:42.120 --> 01:48.900 the starting project for this challenge and try to go through the steps and complete it. Pause the video 22 01:48.900 --> 01:52.620 now and come back if you need to see me walk through the solution with you. 23 01:56.130 --> 01:56.340 All right. 24 01:56.350 --> 02:01.740 So the first thing we're trying to do is to show the word login as the button text 25 02:01.900 --> 02:08.890 If userIsRegistered is true. At the moment if we look inside our form.jsx, we've got this text 26 02:08.890 --> 02:17.080 here saying register and we want to switch up that text depending on the value of our userIsRegistered 27 02:17.200 --> 02:25.790 variable. But unfortunately this lives inside App.js and I mentioned that you can't move that variable. 28 02:25.870 --> 02:28.270 So how do you get it over to the form? 29 02:28.270 --> 02:35.470 Well, you can of course pass it over as a prop. So let's create a prop called isRegistered and we'll set 30 02:35.470 --> 02:38.620 it to equal the value of this variable, 31 02:38.740 --> 02:45.640 userIsRegistered. So frequently when you're rendering things conditionally, you're going to be doing 32 02:45.640 --> 02:48.730 it via props that have been passed over. 33 02:48.730 --> 02:55.300 So now inside our form component, we can receive those props and check for it in order to render something 34 02:55.300 --> 02:57.500 different inside our button. 35 02:57.610 --> 03:06.290 In this case what we want to do is we want to check to see if props.isRegistered, to make sure 36 03:06.290 --> 03:13.620 that I spell it right, is true. And if so we're going to show the word login, but otherwise we're going 37 03:13.620 --> 03:19.970 to show the word register. And this is not being highlighted properly because we haven't yet wrapped 38 03:19.970 --> 03:22.640 it inside a set of curly braces. 39 03:22.640 --> 03:30.890 Now when we go back to our App.js and we switch this variable from false to true, you'll see that 40 03:31.100 --> 03:33.820 that goes to login and then when it's false 41 03:33.860 --> 03:36.600 and when we go back, it goes back to register. 42 03:36.710 --> 03:39.620 So that's step 1 completed. 43 03:39.710 --> 03:44.450 Now step 2 is to only show the confirm password input, 44 03:44.450 --> 03:50.780 so this one, if the userIsRegistered variable is false. 45 03:50.780 --> 03:56.150 Remember that when we have a register screen, we want to have the confirm password input. 46 03:56.150 --> 04:01.310 But when we have a login screen, we don't want to have that field showing at all. 47 04:01.310 --> 04:02.760 How can we do this? 48 04:02.780 --> 04:04.370 Well we know that we receive 49 04:04.370 --> 04:09.630 this isRegistered value as a prop inside our form. 50 04:09.860 --> 04:14.750 So we can determine whether if this input actually gets rendered or not. 51 04:14.860 --> 04:19.180 And the most efficient way of doing this is through using the AND operator. 52 04:19.760 --> 04:29.330 Let's open up a set of parentheses and check if props.isRegistered is equal to false. And if so 53 04:29.360 --> 04:34.490 so two ampersands, then we're going to render this input component. 54 04:35.300 --> 04:43.070 But if it's not false i.e. if this is true, then we're not going to render anything at all. 55 04:43.070 --> 04:45.660 Now let's go ahead and test this out. 56 04:45.680 --> 04:52.130 So when this is false, we see the register screen with that extra confirm password field. But if this 57 04:52.130 --> 04:59.410 is true, then we see the login screen without that extra input. There's quite a few ways that you could 58 04:59.410 --> 05:00.310 have done this. 59 05:00.310 --> 05:04.690 You could have for example used a ternary operator instead. 60 05:04.690 --> 05:12.490 So you can add a question mark here to check this condition, render this if it's true and then render 61 05:12.490 --> 05:13.030 null 62 05:13.030 --> 05:19.900 if it's not true. And this gives you the same effect. But of course if you're after the shortest possible 63 05:19.900 --> 05:26.800 way of creating this kind of conditional rendering, then it's going to be through the use of the ampersand 64 05:26.830 --> 05:32.560 operator. And that means we get to delete the null and all of the extra syntax. 65 05:32.560 --> 05:39.060 And in fact you can even change this prop.iRregistered equals to false to a more simple form 66 05:39.070 --> 05:42.520 just adding an exclamation mark in front. 67 05:42.520 --> 05:47.860 So this basically turns this value to the opposite of what it used to be 68 05:48.010 --> 05:52.600 and it's effectively the same as checking if isRegistered is false. 69 05:53.730 --> 05:59.900 And then we end up with a one line statement that does everything we want. 70 06:00.160 --> 06:02.320 Did you manage to get this challenge right? 71 06:02.380 --> 06:06.520 If not be sure to head back to your own code and try to complete it 72 06:06.520 --> 06:11.920 now that you've watched the video. We're going to be using this concept of conditional rendering a lot 73 06:11.980 --> 06:13.200 in the coming lessons 74 06:13.390 --> 06:19.120 and it's a really fundamental part of React. So be sure that you're really comfortable with it before 75 06:19.120 --> 06:20.930 you move on. 76 06:20.950 --> 06:21.400 All right. 77 06:21.400 --> 06:28.930 In the next lesson, we're going to be talking about a big topic which is state and how we can track and 78 06:28.930 --> 06:31.060 change state in our apps. 79 06:31.090 --> 06:33.430 So for all of that and more, I'll see you there.