1 00:00:01,110 --> 00:00:04,170 ‫So, let's check out how we can do the same thing 2 00:00:04,170 --> 00:00:05,973 ‫with the ternary operator. 3 00:00:07,380 --> 00:00:10,320 ‫So, instead of the end operator here, 4 00:00:10,320 --> 00:00:12,251 ‫let's now use the ternary operator 5 00:00:12,251 --> 00:00:14,670 ‫to do conditional rendering. 6 00:00:14,670 --> 00:00:16,974 ‫And again, in case you are not familiar 7 00:00:16,974 --> 00:00:19,200 ‫with this ternary operator, 8 00:00:19,200 --> 00:00:21,666 ‫please go check out the previous section 9 00:00:21,666 --> 00:00:25,920 ‫with the review of JavaScript needed for React. 10 00:00:25,920 --> 00:00:28,984 ‫So, the ternary operator has three parts, 11 00:00:28,984 --> 00:00:31,164 ‫and the first part is a condition 12 00:00:31,164 --> 00:00:35,340 ‫and if this condition is true, then the result 13 00:00:35,340 --> 00:00:40,340 ‫of the operation will be this second part of the operator, 14 00:00:40,890 --> 00:00:44,733 ‫which right now is all of this, right? 15 00:00:45,690 --> 00:00:49,290 ‫But then the ternary operator also needs a third part, 16 00:00:49,290 --> 00:00:52,140 ‫which is basically like the else branch. 17 00:00:52,140 --> 00:00:54,470 ‫And so, if we want to reproduce the same thing 18 00:00:54,470 --> 00:00:57,671 ‫we had before, here we can just write no. 19 00:00:57,671 --> 00:01:00,780 ‫So give it a safe and you see we get 20 00:01:00,780 --> 00:01:02,853 ‫exactly the same result as before. 21 00:01:03,990 --> 00:01:08,010 ‫So again, the ternary operator has three parts. 22 00:01:08,010 --> 00:01:10,410 ‫So, first a condition, and if this is true, 23 00:01:10,410 --> 00:01:13,044 ‫then this first branch here will become the result 24 00:01:13,044 --> 00:01:14,790 ‫of the operation. 25 00:01:14,790 --> 00:01:16,950 ‫So, of using the operator. 26 00:01:16,950 --> 00:01:19,980 ‫But if it's false, then this last part here, 27 00:01:19,980 --> 00:01:22,920 ‫so this third part, will become the result. 28 00:01:22,920 --> 00:01:26,553 ‫And so, that's what is rendered then in this case. 29 00:01:28,020 --> 00:01:32,430 ‫Let's check that out and indeed, that's what happens. 30 00:01:32,430 --> 00:01:35,370 ‫Now, the advantage of using the turn operator is that 31 00:01:35,370 --> 00:01:37,983 ‫then we can display some alternative. 32 00:01:39,360 --> 00:01:41,920 ‫So let's write some more JSX here 33 00:01:43,020 --> 00:01:48,020 ‫and let's say, "We're still working on our menu. 34 00:01:49,620 --> 00:01:54,620 ‫Please come back later," for example. 35 00:01:55,740 --> 00:01:57,600 ‫So, then we get this. 36 00:01:57,600 --> 00:01:59,580 ‫So, this is, in some situations, 37 00:01:59,580 --> 00:02:02,763 ‫a bit nicer than simply displaying nothing. 38 00:02:04,560 --> 00:02:07,593 ‫But let's go back and here we go. 39 00:02:08,880 --> 00:02:11,940 ‫So, you might be wondering why we cannot simply use 40 00:02:11,940 --> 00:02:14,640 ‫an if-else statement right here. 41 00:02:14,640 --> 00:02:16,588 ‫Well, the reason is, once again, 42 00:02:16,588 --> 00:02:19,680 ‫because of what we learned in the lecture on the rules 43 00:02:19,680 --> 00:02:24,082 ‫of JSX, which is that inside this JavaScript mode, 44 00:02:24,082 --> 00:02:26,910 ‫we cannot write any JavaScript. 45 00:02:26,910 --> 00:02:29,400 ‫What we need to do here is to write something 46 00:02:29,400 --> 00:02:31,770 ‫that actually produces a value 47 00:02:31,770 --> 00:02:35,490 ‫and an if-else statement does not produce a value. 48 00:02:35,490 --> 00:02:39,090 ‫So, let's just experiment something fictional. 49 00:02:39,090 --> 00:02:40,507 ‫So, let's say we wrote, 50 00:02:40,507 --> 00:02:45,507 ‫"If num pizzas greater than zero then" this. 51 00:02:50,640 --> 00:02:52,230 ‫So let's try that. 52 00:02:52,230 --> 00:02:55,500 ‫But yeah, that's not really going to happen. 53 00:02:55,500 --> 00:02:58,143 ‫And we even get this big error here 54 00:02:58,143 --> 00:03:00,657 ‫and it simply says, "Unexpected token." 55 00:03:01,650 --> 00:03:03,810 ‫Well, that's all it says. 56 00:03:03,810 --> 00:03:05,272 ‫And yeah, the reason here is 57 00:03:05,272 --> 00:03:09,594 ‫that doing this does not produce a value. 58 00:03:09,594 --> 00:03:12,185 ‫And so it's the same as just having this 59 00:03:12,185 --> 00:03:15,990 ‫in the end now, right? 60 00:03:15,990 --> 00:03:18,900 ‫So, the ternary operator, when used like this, 61 00:03:18,900 --> 00:03:22,076 ‫is really nice and I do greatly prefer it 62 00:03:22,076 --> 00:03:26,130 ‫over just the end operator that we were using. 63 00:03:26,130 --> 00:03:30,030 ‫And so let's go back down here and also replace it 64 00:03:30,030 --> 00:03:31,263 ‫in this situation here. 65 00:03:32,310 --> 00:03:35,190 ‫So, let's replace that here. 66 00:03:35,190 --> 00:03:38,433 ‫And then also, let's print an alternative here. 67 00:03:39,930 --> 00:03:44,930 ‫So, another piece of JSX, we're happy to welcome you 68 00:03:47,580 --> 00:03:52,580 ‫between, let's just grab this from here. 69 00:03:56,460 --> 00:03:59,753 ‫So here we have the open hour, okay? 70 00:04:05,100 --> 00:04:10,100 ‫Let's change it again to 20 and yeah, nice. 71 00:04:11,880 --> 00:04:14,820 ‫So, ternary operator is a really important tool 72 00:04:14,820 --> 00:04:16,650 ‫in your React toolbox. 73 00:04:16,650 --> 00:04:20,400 ‫And once again, we are just using JavaScript here. 74 00:04:20,400 --> 00:04:23,310 ‫There's nothing React-specific that you need to learn 75 00:04:23,310 --> 00:04:26,670 ‫or to memorize in order to do conditional rendering. 76 00:04:26,670 --> 00:04:29,730 ‫It's all already part of the JavaScript language. 77 00:04:29,730 --> 00:04:32,970 ‫You just need to know that this is how you use it. 78 00:04:32,970 --> 00:04:35,430 ‫So basically, inside these curly braces 79 00:04:35,430 --> 00:04:38,400 ‫to enter JavaScript mode and then, well then, 80 00:04:38,400 --> 00:04:41,033 ‫you just use the operator just like you would do 81 00:04:41,033 --> 00:04:42,813 ‫in vanilla JavaScript.