WEBVTT 00:01.360 --> 00:01.960 Okay. 00:01.960 --> 00:06.430 In this video we will be talking about conditional formatting. 00:06.460 --> 00:12.910 So basically, our goal is to toggle some kind of views based on some condition. 00:12.910 --> 00:21.310 So this will be classical if and based on that condition, we would like to show something or hide something 00:21.310 --> 00:26.230 or do something on our page or display different kind of content. 00:26.230 --> 00:32.740 So we have a few ways to do that in React, and I will show you different examples. 00:33.010 --> 00:40.510 So first I'm inside the let's do that in the app application, which is up here. 00:40.510 --> 00:48.760 And we have, let's say that create alert that we well, okay, I will create a new function here and 00:48.760 --> 00:55.420 then I will create a function that will be our component and we'll say show message. 00:57.850 --> 00:58.600 Like that. 01:00.100 --> 01:03.070 And this will be our message here. 01:03.070 --> 01:05.830 So what I can do is return. 01:09.600 --> 01:12.890 And we can do H2. 01:14.120 --> 01:17.090 My message like that. 01:17.090 --> 01:20.810 So I have a component, quick component here, show message. 01:20.810 --> 01:27.650 And what I can do is I can display it, display that below my component, below my footer. 01:32.180 --> 01:34.550 And then we have my message here. 01:34.550 --> 01:39.770 So what if I would like to have that display based on some conditions? 01:39.770 --> 01:50.600 So what I can do is let's say we can pass some conditions into that component so I can do to show and 01:50.600 --> 01:51.800 then I can do. 01:53.930 --> 01:56.330 True like that. 01:56.330 --> 02:01.520 And then I can receive it in props like that. 02:01.520 --> 02:05.000 And I can do a condition here. 02:05.630 --> 02:14.330 So if props to show, then I will do this. 02:16.170 --> 02:16.920 Health. 02:17.760 --> 02:21.540 I can do something else, for example. 02:22.800 --> 02:25.950 For beaten like that. 02:27.070 --> 02:31.810 So my message is displayed here because I passed through if I will pass. 02:31.810 --> 02:32.380 False. 02:34.090 --> 02:35.440 You can see forbidden. 02:35.560 --> 02:42.430 So this is the way we can actually decide what kind of content goes into our page. 02:42.430 --> 02:49.780 We can have a normal JavaScript if conditions based on some conditions here and we can return it here. 02:49.780 --> 02:52.570 So basically that will work for anything. 02:52.570 --> 02:58.570 What we have on our page, for example, we have our application here and we return this. 02:58.570 --> 03:07.450 So what I can say is I could do a condition if some conditions are met, then return this otherwise 03:07.450 --> 03:08.230 return. 03:08.230 --> 03:12.340 For example, we can do if. 03:14.690 --> 03:16.040 User login. 03:18.370 --> 03:18.910 Then. 03:20.590 --> 03:22.540 Display this. 03:24.070 --> 03:26.920 And then otherwise I can do something else. 03:28.320 --> 03:28.800 Health. 03:29.820 --> 03:32.820 I can do it the same thing as I've done here. 03:32.940 --> 03:34.170 So forbidden. 03:35.640 --> 03:37.350 And then user login. 03:37.350 --> 03:39.270 I can set this. 03:39.270 --> 03:41.880 User login I can do. 03:49.880 --> 03:54.110 So if I will run it now, you can see entire content is forbidden. 03:54.110 --> 04:00.410 But if I will have a login user in my application, you can see everything is displayed properly. 04:00.410 --> 04:08.300 So basically everything what I have written, I can wrap it in any content and I can use condition and 04:08.300 --> 04:10.070 return my return. 04:10.070 --> 04:15.140 Any HTML or js part of this return and this will be printed. 04:15.140 --> 04:17.630 So that's one way to print it. 04:17.630 --> 04:24.650 I will revert it back to what I had before, just to not mess too much with the code. 04:24.650 --> 04:26.990 It will be easier to read later on. 04:26.990 --> 04:29.120 And then also I can remove this. 04:29.120 --> 04:37.160 So basically we might have typical if inside our JavaScript and based on that, if we can display certain 04:37.160 --> 04:46.010 parts of our page, another way to display things will be to use that inside HTML. 04:46.010 --> 04:51.990 So what we can do, I'll mention that before when we use curly brackets like this, that means we can 04:51.990 --> 04:53.450 run any JavaScript there. 04:53.610 --> 04:57.780 And what we can do inside, we can have a ternary operator. 04:58.050 --> 05:06.390 So what I can say is maybe I can move to our component where we have something to use like this one. 05:06.390 --> 05:11.940 So we have a footer with some state, so I can use this maybe inside the footer. 05:12.030 --> 05:16.710 So we at the moment we have this page by Christian and then input. 05:16.740 --> 05:25.470 What I can do here is I can have this curly brackets and then I can have a ternary operator which is 05:25.620 --> 05:29.940 inline if condition if condition statement. 05:29.940 --> 05:39.990 So I can do this state and let's say I can do H like this if that's equal to. 05:40.850 --> 05:41.900 35. 05:43.270 --> 05:48.010 Then I can do something so I can do two things. 05:50.430 --> 05:52.710 And I will show you that in a second. 05:56.530 --> 06:01.480 So that's all about what I have now. 06:01.480 --> 06:08.500 And then we we have in this syntax, we have condition, which is this one. 06:08.500 --> 06:12.790 So we check if our state H is equal to 35. 06:12.820 --> 06:19.840 If so, this is if and then if if it is, then this will be printed. 06:19.870 --> 06:22.360 If it's not, this one will be printed. 06:22.360 --> 06:26.320 So if we save it now you can see, yes, it's printed. 06:26.320 --> 06:31.930 So if I will compare it with some other age, this is printed. 06:31.930 --> 06:40.090 So basically that's a ternary operator in line operator and we can use it directly inside our HTML here. 06:40.450 --> 06:43.390 And this condition may be any condition we like. 06:43.390 --> 06:44.980 So we might have. 06:46.200 --> 06:49.650 Uh, for example, login and logout a login user here. 06:49.650 --> 06:59.490 And we can also validate that important part here is that we don't, we don't need to keep it like a 06:59.490 --> 07:00.480 simple text here. 07:00.480 --> 07:03.270 We might have the entire elements there. 07:03.270 --> 07:07.410 So what I can do is I can do like that. 07:07.410 --> 07:15.390 And inside this parentheses I can let's wrap the entire content here and I can put it. 07:16.340 --> 07:16.730 There. 07:17.930 --> 07:21.170 Uh, this kind of starts to look very weird. 07:21.170 --> 07:22.220 And now. 07:22.220 --> 07:24.740 And we have an error because we are. 07:24.740 --> 07:26.360 And we should. 07:27.610 --> 07:31.960 It'll return only one element from from this. 07:31.990 --> 07:36.040 So what I need to do is I could do a react. 07:37.680 --> 07:47.430 Fragment and then wrap it everything inside, react, fragment, and then the error is gone. 07:47.430 --> 07:51.840 So basically we have H2 tag and the input inside React fragment. 07:51.840 --> 07:54.660 So I display this. 07:54.660 --> 07:59.430 All of this when the age is 36, it is not. 07:59.430 --> 08:02.070 So you can see here no footer is displayed. 08:02.070 --> 08:09.600 And then we have this one if I will change it to 35 in the same way as I compare it before, you can 08:09.600 --> 08:11.190 see everything is displayed. 08:11.190 --> 08:15.660 So we at the moment we have age 34, 35. 08:16.080 --> 08:20.370 So in here we can have another version of this. 08:20.370 --> 08:22.230 So we are not restricted. 08:22.230 --> 08:30.270 To display this as a simple text, we might have something here so I can say. 08:34.810 --> 08:36.730 I will remove this. 08:37.870 --> 08:39.550 And I can say. 08:49.780 --> 08:52.120 And then I can have, for example. 08:59.550 --> 09:01.330 They may have two different. 09:03.880 --> 09:07.790 I may have two different outputs, two different parts of this. 09:07.810 --> 09:10.600 And then if I will have like, for example. 09:15.160 --> 09:18.040 Now, if I will make it like this, it will have more sense. 09:18.040 --> 09:21.280 So we will kind of compare state is login. 09:21.280 --> 09:25.180 So if it is login, then it will display this. 09:26.710 --> 09:31.650 And you can't see this content and we display it. 09:31.650 --> 09:32.470 You must be logged in. 09:32.470 --> 09:35.980 That's what we display there because it's login is false. 09:35.980 --> 09:40.830 And then if I will make it true, you can see this is display. 09:40.840 --> 09:49.450 So that's another way how we can actually toggle things and display certain parts of our application 09:49.450 --> 09:51.130 based on certain conditions. 09:51.130 --> 09:55.840 So we have a few ways to do it, a few ways to write our syntax. 09:55.840 --> 10:00.670 One will be inline like this and then the first is the condition. 10:00.670 --> 10:10.000 Then you have question mark and then this section here is when this condition is met, then it will 10:10.000 --> 10:10.690 be displayed. 10:10.690 --> 10:14.800 And then we have colon and then you have another condition. 10:14.800 --> 10:21.370 And if that is not met, then you will have another or you can use normal function and inside JavaScript 10:21.370 --> 10:25.960 you can return a content based on the condition you pass it. 10:25.960 --> 10:26.710 There. 10:26.710 --> 10:33.730 So that's a conditions in React and they are used very often. 10:33.730 --> 10:40.930 And I have to say I don't really like this syntax that much, but there is not much I can do about it. 10:40.930 --> 10:48.670 Usually I go for something like this and it's sometimes really hard to read where where is the section 10:48.670 --> 10:50.980 starting, where it's ending and so on. 10:50.980 --> 10:55.180 But that's how the react works, so we just need to get used to it.