1 00:00:00,240 --> 00:00:07,260 So what we are going to do now is to create a pattern such that it can't be a taco show and hide and 2 00:00:07,260 --> 00:00:12,950 we are going to change the function of this pattern so we can go to the app J. 3 00:00:12,970 --> 00:00:17,700 S. and now this is not to change the name. 4 00:00:17,700 --> 00:00:23,330 We are going to talk all the show and hide and also things. 5 00:00:23,670 --> 00:00:27,600 We are going to set a true force of the show and hide. 6 00:00:28,170 --> 00:00:34,910 So we have to create a new state which is so copied and also set so can't 7 00:00:38,930 --> 00:00:43,870 so we set that initial stage to be true so that when the website you'd stop it. 8 00:00:44,020 --> 00:00:45,360 So the card. 9 00:00:45,580 --> 00:00:50,790 Also we have to create a new fungus on total so far. 10 00:00:51,830 --> 00:00:53,740 And here we go to use the. 11 00:00:53,770 --> 00:01:03,110 So talk to be extend reason of the show card which means if the original value is false it will change 12 00:01:03,110 --> 00:01:05,230 too true true. 13 00:01:05,350 --> 00:01:06,890 We will return to fourth. 14 00:01:06,890 --> 00:01:09,350 So now we can buy to these bottle 15 00:01:12,160 --> 00:01:18,820 to create a conditional rendering we already can imagine what we are going to do is to show the card 16 00:01:18,960 --> 00:01:20,540 if the show cut is true. 17 00:01:20,590 --> 00:01:22,350 Otherwise you will hide a card. 18 00:01:22,420 --> 00:01:24,790 So there is if else questions. 19 00:01:24,850 --> 00:01:30,120 And here we need a ternary operator to turn to me. 20 00:01:30,280 --> 00:01:31,620 Operators like this. 21 00:01:31,660 --> 00:01:36,310 This is actually the soft form of the if and else. 22 00:01:36,310 --> 00:01:46,580 Here is an example if a slash time b c is equal to a l c is equal to B so actually this is the condition. 23 00:01:46,780 --> 00:01:52,060 And if this is to be real code eight otherwise this is B. 24 00:01:52,120 --> 00:02:01,180 So in this case we will also like this if the sole card is true we do not need to use equal equal to 25 00:02:01,180 --> 00:02:07,990 two because this already equal to check whether this is true. 26 00:02:07,990 --> 00:02:09,920 If this is true we want to show the card. 27 00:02:11,490 --> 00:02:16,060 Otherwise we said no we do not want to show anything. 28 00:02:16,060 --> 00:02:24,100 So back to the TSX here we can create a graph of Square 29 00:02:27,330 --> 00:02:30,030 if this is true then we will show the card. 30 00:02:31,230 --> 00:02:34,290 Otherwise this will become No. 31 00:02:34,350 --> 00:02:42,300 And now we can test the website it already can talk all the show and hide on the card. 32 00:02:42,300 --> 00:02:50,190 And actually if you already know that there is no else face actually we can delete this one and change 33 00:02:50,190 --> 00:02:52,630 the question mark to a double N. 34 00:02:53,430 --> 00:03:04,820 And you can check this again in auto work and there is a better way to make this GSA cleaner is to extract 35 00:03:04,820 --> 00:03:09,630 a whole bunch of code back to the javascript area 36 00:03:16,260 --> 00:03:17,820 we can paste it in here. 37 00:03:18,120 --> 00:03:24,150 And since we already at the javascript area so we do not need the cardio braces. 38 00:03:24,350 --> 00:03:31,590 And back to the J S x we used the mock up to override the always you know cut area. 39 00:03:31,590 --> 00:03:35,580 So we set a top mock up here 40 00:03:38,430 --> 00:03:40,490 and we did it the space. 41 00:03:41,190 --> 00:03:42,380 There will be an area. 42 00:03:42,420 --> 00:03:51,150 If we page these mockups apart and they change and change name handler because we used these to function 43 00:03:51,300 --> 00:03:52,650 before it initialize. 44 00:03:52,770 --> 00:04:01,170 So we need to cut this out and paste at the bottom of the functions and we may also need to better uh 45 00:04:01,500 --> 00:04:14,160 move the buttons up under the functions so we delete the space again so let's save it the NSF I'll try 46 00:04:14,160 --> 00:04:15,470 again. 47 00:04:15,570 --> 00:04:17,180 So it still work. 48 00:04:17,340 --> 00:04:19,950 So this is how to create a conditional rendering.