1 00:00:00,480 --> 00:00:06,810 Before we deep dive into our second project why don't we also take a look at the conditional rendering 2 00:00:06,930 --> 00:00:08,480 in the JSF. 3 00:00:08,820 --> 00:00:12,750 And we technically could have covered this all the way in the beginning. 4 00:00:12,750 --> 00:00:18,210 However I do find it a little bit more useful as we have more information about the react that would 5 00:00:18,210 --> 00:00:23,730 be number one and number two when we can actually implement it with some kind of button clicks because 6 00:00:23,730 --> 00:00:25,410 I think it's gonna be much more interesting. 7 00:00:25,890 --> 00:00:30,960 So for us what I would like to do is get rid of this handle the late so I don't want to delay the item 8 00:00:31,350 --> 00:00:38,160 because I have kind of a very limited real estate here so I might as well just work with whatever items 9 00:00:38,160 --> 00:00:39,090 we have. 10 00:00:39,090 --> 00:00:43,590 So going to delete both of these things and then we're gonna set up a new button. 11 00:00:43,590 --> 00:00:45,360 Then again we're gonna say but. 12 00:00:45,390 --> 00:00:50,960 And now for the button again WE'RE GONNA HAVE SOME TYPE TYPE IS GONNA BE button. 13 00:00:51,150 --> 00:00:55,700 So let's make sure we do that and then we're gonna have some kind of on click. 14 00:00:55,770 --> 00:00:58,080 So for in this case let's right on click. 15 00:00:58,120 --> 00:01:00,480 And now we're gonna be setting up this function. 16 00:01:00,480 --> 00:01:06,360 We haven't set up anything of course yet but we're gonna have like say some kind of handle info and 17 00:01:06,360 --> 00:01:08,050 you'll see why we're calling this that. 18 00:01:08,750 --> 00:01:15,720 So we're gonna say okay so there is gonna be a function going to call this and all and the whole info 19 00:01:15,720 --> 00:01:18,450 or toggle info doesn't really matter. 20 00:01:18,450 --> 00:01:23,400 And then we're not gonna pass any kind of parameters here or any arguments. 21 00:01:23,460 --> 00:01:29,010 And what is it gonna be working Wednesday and what I would like to right now set it up in a state is 22 00:01:29,010 --> 00:01:31,200 the Show Info variable. 23 00:01:31,410 --> 00:01:35,190 So I'm going to say there's gonna be a variable by the name of a windfall. 24 00:01:35,250 --> 00:01:38,220 And by default right away this is gonna be true. 25 00:01:38,880 --> 00:01:43,850 So that's gonna be my setup and then I would like to toggle this as I'm clicking this button. 26 00:01:44,190 --> 00:01:48,010 So why don't we set it up with the handle and phone. 27 00:01:48,150 --> 00:01:52,620 Why don't we see and all in full that's gonna be the name of my function. 28 00:01:52,620 --> 00:01:58,500 And I was in this case I do need to add there's not a not going to be working with this info and here 29 00:01:58,500 --> 00:02:06,900 we'll go and say toggle info and so far we have the button that's gonna be toggling. 30 00:02:07,650 --> 00:02:13,170 Why are we working with right now these methods as well as here in the state. 31 00:02:13,170 --> 00:02:19,590 Well what I'm trying to show you is that what happens has you working with J a 6 and if you would like 32 00:02:19,590 --> 00:02:24,210 to have some kind of conditional statement because the issue is very simple here. 33 00:02:24,390 --> 00:02:29,180 So let's say that we have these show info is true currently at the state. 34 00:02:29,420 --> 00:02:36,000 And let's imagine there's some kind of paragraph here and within the paragraph I would just like to 35 00:02:36,000 --> 00:02:37,360 show this paragraph. 36 00:02:37,500 --> 00:02:40,980 If the value is gonna be equal to true. 37 00:02:41,220 --> 00:02:46,590 Well how you would do this normal in JavaScript since you are thinking probably well I have the curly 38 00:02:46,590 --> 00:02:48,540 braces so I have the javascript. 39 00:02:48,930 --> 00:02:50,090 So why don't we try it out. 40 00:02:50,090 --> 00:02:51,590 Why do I say if. 41 00:02:51,930 --> 00:02:59,790 And then we're going to be looking for these dot state and then we're going to be looking for show info. 42 00:02:59,800 --> 00:03:03,930 The issue is that this is not going to be an expression. 43 00:03:04,080 --> 00:03:10,580 And if you remember correctly we cannot run something here that is not an expression. 44 00:03:10,650 --> 00:03:16,340 So we always need to return some kind of value and if statements are not going to be allowed. 45 00:03:16,410 --> 00:03:21,380 So we're gonna have to come up with some creative ways how we can avoid the worry. 46 00:03:21,390 --> 00:03:25,350 There's three of them and we're going to look at as well as later on as we're going to be working on 47 00:03:25,350 --> 00:03:26,380 the project. 48 00:03:26,400 --> 00:03:30,900 There is actually going to be a fourth one which in my opinion is even a little bit more interesting 49 00:03:31,290 --> 00:03:36,150 meaning that that is going to deal basically with this whole thing with this whole return. 50 00:03:36,190 --> 00:03:40,260 And that's why I'm saying that this is going to be a little bit more interesting these ones we're just 51 00:03:40,440 --> 00:03:42,390 dealing with specific info. 52 00:03:42,510 --> 00:03:47,100 Let's say some kind of paragraph some kind of heading for is the fourth one that we're going to look 53 00:03:47,100 --> 00:03:53,500 at in the project is gonna deal with the whole book or whole component something like that. 54 00:03:54,010 --> 00:03:56,850 OK here what would be our choices. 55 00:03:56,880 --> 00:04:04,340 Well we can start with a conditional rendering or for conditional rendering what do we have. 56 00:04:04,350 --> 00:04:07,150 Well we have a setup where we have a hand. 57 00:04:07,320 --> 00:04:12,180 So if we have two hands then basically that next thing is gonna be shown. 58 00:04:12,180 --> 00:04:18,270 Also we have an option of ternary operator as well as we can have the separate function. 59 00:04:18,270 --> 00:04:19,980 So why don't we start with an end. 60 00:04:20,070 --> 00:04:21,760 So how the end is going to work. 61 00:04:21,800 --> 00:04:26,670 Well first of all I can say like this I'm gonna say that I'm gonna be checking the value in a state 62 00:04:28,280 --> 00:04:35,880 that stage 0 in form and if I'm going to say and and now if the value is going to be true then I would 63 00:04:35,880 --> 00:04:37,940 like to render here the paragraph. 64 00:04:37,940 --> 00:04:40,020 So in this case this is going to be my return. 65 00:04:40,190 --> 00:04:43,080 So I'm going to say I'd like a on this case. 66 00:04:43,080 --> 00:04:44,680 This is gonna be 20. 67 00:04:44,730 --> 00:04:46,440 So now let's see what will happen. 68 00:04:46,710 --> 00:04:47,760 The moment we show it. 69 00:04:48,200 --> 00:04:49,600 How is that this is gonna be shown. 70 00:04:49,990 --> 00:04:55,670 So the paragraph is showing because the value in a state for the show is meaningful is true. 71 00:04:56,100 --> 00:05:00,400 But what if we're going to change this one if I'm going to say something like this. 72 00:05:00,630 --> 00:05:07,970 Now all the paragraphs are not going to be shown because this only works if this value is true. 73 00:05:08,040 --> 00:05:14,340 So if this value is going to be true the first one then the second one is gonna be returned or if this 74 00:05:14,340 --> 00:05:17,340 is going to be false then nothing nothing is going to be sure. 75 00:05:18,300 --> 00:05:18,700 All right. 76 00:05:18,720 --> 00:05:21,090 So that would be our first one there would be and. 77 00:05:21,170 --> 00:05:26,250 And you know what since I want you to keep the reference I will going to comment this out and then we're 78 00:05:26,250 --> 00:05:29,720 going to continue and now we're going to look at the ternary operator. 79 00:05:29,940 --> 00:05:32,390 So how the ternary operator is gonna work. 80 00:05:32,430 --> 00:05:35,380 First of all why don't we set it up this with a button. 81 00:05:35,430 --> 00:05:36,440 Like I said before. 82 00:05:36,630 --> 00:05:44,250 So why don't we go here and we're gonna say that we we're gonna be looking for this dot set state and 83 00:05:44,250 --> 00:05:50,520 then within the state we would want to have the show in full value know since I would want to toggle 84 00:05:50,520 --> 00:05:50,930 it. 85 00:05:51,030 --> 00:05:52,650 I'm gonna set it up like this. 86 00:05:52,650 --> 00:05:59,270 I'm gonna say whatever value you have right now in this dot state show in. 87 00:05:59,430 --> 00:06:00,990 Give me the opposite. 88 00:06:01,020 --> 00:06:06,840 So if by default this is going to be true the moment we're gonna press it then the value is gonna turn 89 00:06:06,840 --> 00:06:13,780 false as well as if we're gonna have it as a false and then we're gonna turn it back to a true. 90 00:06:13,780 --> 00:06:15,780 So that's the idea how we're gonna be working with. 91 00:06:16,230 --> 00:06:18,270 So we right now have this toggle info. 92 00:06:18,450 --> 00:06:25,050 And by the way we can check it out again in the Google Developer tools so we can say inspect or react 93 00:06:25,050 --> 00:06:26,400 developer tools. 94 00:06:26,450 --> 00:06:29,480 We can say like this we're going to be looking for the react. 95 00:06:29,580 --> 00:06:33,940 And then as we make this bigger notice we have our first book. 96 00:06:34,080 --> 00:06:35,070 And what do you see or hear. 97 00:06:35,100 --> 00:06:40,530 We have the show and what folks or what's gonna happen if I'm gonna collect but this is gonna be true 98 00:06:41,340 --> 00:06:43,680 false true false true. 99 00:06:43,770 --> 00:06:45,220 So we're Toggling it. 100 00:06:45,330 --> 00:06:47,550 Everything is working exactly like we want. 101 00:06:48,030 --> 00:06:53,160 So by the way if we're gonna head over back and uncommon this just to show that this is gonna work obviously 102 00:06:53,160 --> 00:06:58,500 with the button because in the beginning I just showed you with changing the value of the state. 103 00:06:58,580 --> 00:07:04,470 And as you can see and this is only going to be affected again where I'm clicking since each of them 104 00:07:04,470 --> 00:07:08,000 are gonna have their separate state not sure what else we have. 105 00:07:08,010 --> 00:07:14,820 Like I said we would want to look at the ternary operator that's gonna be our best friend and the way 106 00:07:14,820 --> 00:07:16,380 the Terry operator works. 107 00:07:16,410 --> 00:07:18,030 Again we're gonna be checking the value. 108 00:07:18,150 --> 00:07:21,470 So there's that state show in. 109 00:07:21,520 --> 00:07:23,010 However here we have a question mark. 110 00:07:23,490 --> 00:07:28,230 And now in this case if the value is through again we're gonna be doing the same thing where we're looking 111 00:07:28,230 --> 00:07:33,180 for the paragraph and in this case you know what let's write like 10 words because I think this was 112 00:07:33,180 --> 00:07:34,280 a little bit too much. 113 00:07:34,470 --> 00:07:38,260 And if the value is going to be false I'm gonna be returning now. 114 00:07:38,370 --> 00:07:44,760 I understand that this might look a little bit foreign to you because we are not used to as will work 115 00:07:44,780 --> 00:07:50,420 with javascript but within the react we can do it like this and say you know what if the value is gonna 116 00:07:50,440 --> 00:07:52,480 be false then just return. 117 00:07:52,830 --> 00:07:58,410 And what that would mean is that as we're gonna be clicking again we're gonna be doing the same thing 118 00:07:58,800 --> 00:08:01,430 where we will gonna be hiding our info. 119 00:08:01,460 --> 00:08:02,040 Okay. 120 00:08:02,260 --> 00:08:05,280 Now let me come on this guy out as well. 121 00:08:05,280 --> 00:08:09,940 Just so you can see and you know what maybe with me and some kind of comments here. 122 00:08:10,290 --> 00:08:20,370 Let's say then this would be and then this is gonna be ternary Perry to Now let's set up the function. 123 00:08:20,420 --> 00:08:22,390 So this is also going to be something real interesting. 124 00:08:22,790 --> 00:08:28,370 Although these were also cool but I just find the functions little bit more cool. 125 00:08:28,370 --> 00:08:36,970 Okay so I'm gonna go whereas my render basically above the return so I don't want to do it in return. 126 00:08:36,970 --> 00:08:43,840 And I'm gonna set up some kind of function somewhere seconds and we're gonna name this check info and 127 00:08:43,840 --> 00:08:45,740 that's gonna be the name of our function. 128 00:08:45,850 --> 00:08:47,660 And here we're gonna be passing the info. 129 00:08:47,830 --> 00:08:50,690 So some kind of parameter. 130 00:08:50,800 --> 00:08:53,180 Again you are you can guess at that. 131 00:08:53,380 --> 00:08:59,080 This is what we're going to be passing in how or in this case this is just going to be a parameter. 132 00:08:59,080 --> 00:09:05,000 And then now it can set up actually the state since again this is not going to be Jeff Sachs. 133 00:09:05,110 --> 00:09:06,910 We are working with normal jobs. 134 00:09:07,390 --> 00:09:09,610 So here I can see if info. 135 00:09:09,610 --> 00:09:13,820 So if info the parameter you're passing is gonna be true. 136 00:09:13,900 --> 00:09:20,940 Dan I would like to return something to say OK so now give me back my JavaScript in my return. 137 00:09:21,370 --> 00:09:26,850 So let's say for J OSX sorry paragraph a law and I don't know. 138 00:09:26,850 --> 00:09:35,380 Again 10 and then if the value is going to be false just sales on again let's return. 139 00:09:35,460 --> 00:09:41,950 I'm not going to be returning No that's gonna be our set of fully everything looks fine here so we have 140 00:09:41,950 --> 00:09:44,280 if this is true then whatever. 141 00:09:44,500 --> 00:09:45,310 But you know what. 142 00:09:45,310 --> 00:09:47,980 No at some point this is gonna give me an error. 143 00:09:48,100 --> 00:09:52,420 And the reason for that because I haven't set up properly the actual hero function. 144 00:09:52,420 --> 00:09:57,490 So this would be my check for what's really cool about this function that I can just run my function 145 00:09:57,490 --> 00:10:03,860 here and what I'm saying here again in the function is gonna be check in full and then within the function. 146 00:10:04,060 --> 00:10:08,150 The argument that I'm passing here for the info here is gonna be from the state. 147 00:10:08,870 --> 00:10:14,380 There's the state show you guess that show info. 148 00:10:14,530 --> 00:10:16,240 Again the same situation. 149 00:10:16,240 --> 00:10:21,230 We have some kind of parameters since right now we're returning. 150 00:10:21,250 --> 00:10:25,540 So again remember we're running this function since we passed it. 151 00:10:25,540 --> 00:10:27,780 It's not like we have passed it has a reference. 152 00:10:27,910 --> 00:10:31,560 We're actually running the function because we're passing the value right away. 153 00:10:31,690 --> 00:10:35,050 So the moment it runs it's like OK this is true right now. 154 00:10:35,110 --> 00:10:36,530 So the true state. 155 00:10:36,610 --> 00:10:37,350 Awesome. 156 00:10:37,420 --> 00:10:42,350 Then once I click it again it's not showing showing naturally and so on and so forth. 157 00:10:42,560 --> 00:10:46,680 And that's how we can use the conditional rendering in the GSA.