1 00:00:00,300 --> 00:00:01,290 Not bad, not bad. 2 00:00:01,470 --> 00:00:05,640 Hopefully we are comfortable with short circuit operators. 3 00:00:06,570 --> 00:00:14,040 Next, I would want to add a button to the mix so that way we'll see how we can set this up dynamically, 4 00:00:14,310 --> 00:00:16,200 essentially instead of hard coding. 5 00:00:16,530 --> 00:00:21,480 Of course, this will depend on the value and line will change that value using the button. 6 00:00:21,960 --> 00:00:27,780 And then also would want to talk about the ternary operator and why is that useful. 7 00:00:28,140 --> 00:00:28,590 All right. 8 00:00:28,920 --> 00:00:33,840 So let's start, I guess, by setting up our button. 9 00:00:34,290 --> 00:00:37,920 So right below the ring, one more. 10 00:00:38,010 --> 00:00:41,160 Yeah, I think the heading one is going to be the best case scenario. 11 00:00:41,460 --> 00:00:42,420 I'm going to go with Button. 12 00:00:43,770 --> 00:00:51,690 And then again, add a little bit of styling salesclerk last name, not one is equal to a beaten and 13 00:00:51,690 --> 00:00:52,770 not inside the button. 14 00:00:52,800 --> 00:00:57,460 All right, doggle error, doggle and error. 15 00:00:57,990 --> 00:01:01,920 And now let's imagine that we're going to have some kind of state. 16 00:01:02,490 --> 00:01:09,990 So, of course, this is going to be the error state and then I'll toggle it using this button, show 17 00:01:10,020 --> 00:01:12,090 up where I have the text. 18 00:01:12,570 --> 00:01:18,600 And you know what, by the way, I think at this point can just come in them and I'll create another 19 00:01:18,600 --> 00:01:21,750 state variable and it's going to be an error. 20 00:01:22,080 --> 00:01:23,810 So I'm going to say is error. 21 00:01:24,450 --> 00:01:26,540 And then, of course, we have set function as well. 22 00:01:26,640 --> 00:01:28,890 Set is error. 23 00:01:29,550 --> 00:01:35,350 And then in here that is equal to a used state and then by default, it is going to be false. 24 00:01:35,820 --> 00:01:38,320 So by default, there is no error. 25 00:01:38,910 --> 00:01:46,710 And now what I would want is to set up some kind of element, same like we did with adding one over 26 00:01:46,710 --> 00:01:48,420 here or you're not. 27 00:01:48,640 --> 00:01:50,370 I think we can do the same one. 28 00:01:50,620 --> 00:01:55,290 Hopefully you have it for your reference, because what I'm going to do right now is just change it 29 00:01:55,290 --> 00:02:02,040 around a little bit where instead of relying on text, I'm going to rely on is error. 30 00:02:02,510 --> 00:02:04,370 So I'm going to say is error. 31 00:02:04,740 --> 00:02:12,880 And now what I'm trying to say is that if the error is true, then I want to display this same one. 32 00:02:12,900 --> 00:02:15,000 So, of course, we can change the text as well. 33 00:02:15,000 --> 00:02:18,210 So say here error and then three dots. 34 00:02:18,510 --> 00:02:20,290 Not for the moment I save. 35 00:02:20,910 --> 00:02:22,920 I have nothing to correct. 36 00:02:23,190 --> 00:02:23,600 Why? 37 00:02:23,880 --> 00:02:27,570 Well, because here I'm checking whether the error is true. 38 00:02:27,570 --> 00:02:32,700 And we already know that with an operator only if this is true. 39 00:02:33,210 --> 00:02:37,620 And of course we'll display that one unless we the expansion point. 40 00:02:37,860 --> 00:02:43,300 And of course I'm checking if this is falsie or false and then I'm displaying the heading one. 41 00:02:43,590 --> 00:02:49,590 So now of course, I can see it, but I actually would want to only display it if the error is true. 42 00:02:49,920 --> 00:02:54,990 And I would want to use this button to toggle the error using the set function. 43 00:02:55,770 --> 00:03:00,780 And the way we can do that is by adding on click over here. 44 00:03:01,200 --> 00:03:03,570 Then again, only need our inline function. 45 00:03:04,260 --> 00:03:14,410 And also here set is error and then all use again the exclamation point and I'll say is error. 46 00:03:15,300 --> 00:03:17,340 So what's the code saying over here? 47 00:03:17,740 --> 00:03:26,430 Well, I'm calling set is error, but then on all the time, grabbing the opposite value of the current 48 00:03:26,430 --> 00:03:27,100 is error. 49 00:03:27,450 --> 00:03:30,300 So currently is error is false. 50 00:03:30,750 --> 00:03:31,180 Correct. 51 00:03:31,200 --> 00:03:35,430 That's the default for the first time I click it, it's going to check. 52 00:03:35,440 --> 00:03:35,880 All right. 53 00:03:36,150 --> 00:03:37,470 What is the value that is false. 54 00:03:37,710 --> 00:03:42,830 So let me flip it error to true, because that is going to be opposite. 55 00:03:43,110 --> 00:03:48,330 And of course, the next time when it is already true, then again, we on the same function. 56 00:03:48,450 --> 00:03:50,820 Now, of course, it will change it back to false. 57 00:03:51,180 --> 00:03:58,260 So essentially we set up a toggle state where the moment I click notice now I'm displaying the error. 58 00:03:58,260 --> 00:03:58,650 Why? 59 00:03:59,280 --> 00:04:01,410 Because I change the value in a state. 60 00:04:01,860 --> 00:04:04,500 I change it from false to true. 61 00:04:05,220 --> 00:04:09,270 And I think this would be a good use case for reactive tools. 62 00:04:09,790 --> 00:04:13,680 So let's go localhost and line three thousand. 63 00:04:14,640 --> 00:04:21,950 And remember, we had to look for components here, so let's say where it as word as profile components 64 00:04:22,380 --> 00:04:28,480 and of course we have a short circuit and check out the state where half state is false. 65 00:04:28,860 --> 00:04:32,310 So the moment I click Norrish now, it's going to be true. 66 00:04:33,240 --> 00:04:37,530 OK, so again, once we click, we flip it back to false. 67 00:04:37,950 --> 00:04:45,090 So essentially this is how we're toggling the state and as we're toggling the state, we're also toggling 68 00:04:45,090 --> 00:04:48,780 this one because we're using the and operator. 69 00:04:49,140 --> 00:04:53,130 And only if this is true when display, if it is false. 70 00:04:53,370 --> 00:04:57,010 And of course, we don't display it right now. 71 00:04:57,030 --> 00:05:05,880 Take a look at the ternary operator and the difference between the ternary operator and the and or operator 72 00:05:06,300 --> 00:05:11,230 is the fact that ternary operator will give you two possible values. 73 00:05:11,520 --> 00:05:18,570 So, for example, in this case, I'm checking for Izarra and only if it's true, then I'll display 74 00:05:18,590 --> 00:05:26,910 how with Ternary Operator, we'll display something if it is false and then something else if it is 75 00:05:26,910 --> 00:05:27,210 true. 76 00:05:27,450 --> 00:05:30,240 Again, it is just a job script thing. 77 00:05:30,570 --> 00:05:38,290 So if you need to go and brush up on that, please do so you can Google it or you can use my playlist. 78 00:05:38,310 --> 00:05:45,990 It's up to you, but essentially will deal with ternary operator and syntax for three operators following 79 00:05:45,990 --> 00:05:47,670 where we have a question mark. 80 00:05:48,690 --> 00:05:54,150 Then we have first thing that we would want to show if it is true, and then the second thing, if it 81 00:05:54,150 --> 00:05:54,780 is false. 82 00:05:55,140 --> 00:05:59,240 So in our case, I think I'm going to do the same thing, which is error. 83 00:05:59,640 --> 00:06:02,070 So let's set up the curly braces first. 84 00:06:02,220 --> 00:06:06,300 Again, will check for is error, whether it is true or false. 85 00:06:06,630 --> 00:06:11,400 And then the syntax for term operators fall where we add a question mark. 86 00:06:11,790 --> 00:06:17,340 And then like I said, if this is true, then we'll have our first value. 87 00:06:17,910 --> 00:06:21,970 If it is not true, then we'll place the value after the column. 88 00:06:22,440 --> 00:06:24,500 So in our example, one one of the like. 89 00:06:24,570 --> 00:06:30,340 Well, if it is true, I would want to display a paragraph and I'll say some kind of text. 90 00:06:30,360 --> 00:06:35,130 Now, again, keep in mind, you can set up whatever you want over here. 91 00:06:35,400 --> 00:06:40,020 You can add ten thousand components that are sitting in one giant component. 92 00:06:40,290 --> 00:06:44,870 In my case, I'm just showing you with paragraph, but sky is the limit. 93 00:06:44,940 --> 00:06:45,770 Just remember that. 94 00:06:46,050 --> 00:06:49,560 And as far as the text, I'm going to say there is error. 95 00:06:50,900 --> 00:06:57,020 And again, we go with three dots, so this is going to be the case if the error is true. 96 00:06:57,560 --> 00:06:59,770 Of course, we all know that a default is not the case. 97 00:07:00,200 --> 00:07:06,360 Now, after the call and we will place what will display if the error is false. 98 00:07:06,710 --> 00:07:09,400 So notice in here, we had no fallback. 99 00:07:10,100 --> 00:07:11,840 We only display it if this is true. 100 00:07:12,080 --> 00:07:13,650 In this case, though, we do have it. 101 00:07:14,180 --> 00:07:17,680 So if this is true, beautiful, we'll display the paragraph. 102 00:07:17,870 --> 00:07:19,800 However, if it is not true. 103 00:07:20,180 --> 00:07:24,040 Now, let me showcase that we can set up something more complicated. 104 00:07:24,050 --> 00:07:24,950 I'm going to go with Dave. 105 00:07:25,430 --> 00:07:32,570 And then within a day, if there's going to be heading to and I'll say there is no error like so. 106 00:07:33,230 --> 00:07:35,450 And once we'll save, check it out. 107 00:07:35,900 --> 00:07:38,310 Now it says there is no error. 108 00:07:38,840 --> 00:07:39,860 Why won't. 109 00:07:39,860 --> 00:07:42,950 Simple because error, of course, is false. 110 00:07:43,340 --> 00:07:43,700 Correct. 111 00:07:44,090 --> 00:07:50,390 So if it is false, then of course we skip the first part because we check what is the value for error. 112 00:07:50,630 --> 00:07:51,880 And of course it is false. 113 00:07:51,900 --> 00:07:57,080 So we skip this one, the paragraph and then we right away go to the second value. 114 00:07:57,350 --> 00:07:58,400 That's why we have here. 115 00:07:58,550 --> 00:08:00,590 There is no error. 116 00:08:00,950 --> 00:08:04,500 Now, the moment I click, notice what's going to happen. 117 00:08:04,820 --> 00:08:06,280 So first I'll have my error. 118 00:08:06,530 --> 00:08:10,730 We already covered up because that is, of course, are an operator. 119 00:08:11,030 --> 00:08:14,850 But then I have my paragraph with there is error. 120 00:08:15,380 --> 00:08:23,930 So those are the ways how we can display elements or components conditionally in react. 121 00:08:24,200 --> 00:08:31,130 Because please keep in mind we cannot use if because if doesn't return the value we need to use something 122 00:08:31,280 --> 00:08:39,380 that returns the value, whether that is a short circuit operator or that is a term operator.