‫So, let's check out how we can do the same thing
‫with the ternary operator.
‫So, instead of the end operator here,
‫let's now use the ternary operator
‫to do conditional rendering.
‫And again, in case you are not familiar
‫with this ternary operator,
‫please go check out the previous section
‫with the review of JavaScript needed for React.
‫So, the ternary operator has three parts,
‫and the first part is a condition
‫and if this condition is true, then the result
‫of the operation will be this second part of the operator,
‫which right now is all of this, right?
‫But then the ternary operator also needs a third part,
‫which is basically like the else branch.
‫And so, if we want to reproduce the same thing
‫we had before, here we can just write no.
‫So give it a safe and you see we get
‫exactly the same result as before.
‫So again, the ternary operator has three parts.
‫So, first a condition, and if this is true,
‫then this first branch here will become the result
‫of the operation.
‫So, of using the operator.
‫But if it's false, then this last part here,
‫so this third part, will become the result.
‫And so, that's what is rendered then in this case.
‫Let's check that out and indeed, that's what happens.
‫Now, the advantage of using the turn operator is that
‫then we can display some alternative.
‫So let's write some more JSX here
‫and let's say, "We're still working on our menu.
‫Please come back later," for example.
‫So, then we get this.
‫So, this is, in some situations,
‫a bit nicer than simply displaying nothing.
‫But let's go back and here we go.
‫So, you might be wondering why we cannot simply use
‫an if-else statement right here.
‫Well, the reason is, once again,
‫because of what we learned in the lecture on the rules
‫of JSX, which is that inside this JavaScript mode,
‫we cannot write any JavaScript.
‫What we need to do here is to write something
‫that actually produces a value
‫and an if-else statement does not produce a value.
‫So, let's just experiment something fictional.
‫So, let's say we wrote,
‫"If num pizzas greater than zero then" this.
‫So let's try that.
‫But yeah, that's not really going to happen.
‫And we even get this big error here
‫and it simply says, "Unexpected token."
‫Well, that's all it says.
‫And yeah, the reason here is
‫that doing this does not produce a value.
‫And so it's the same as just having this
‫in the end now, right?
‫So, the ternary operator, when used like this,
‫is really nice and I do greatly prefer it
‫over just the end operator that we were using.
‫And so let's go back down here and also replace it
‫in this situation here.
‫So, let's replace that here.
‫And then also, let's print an alternative here.
‫So, another piece of JSX, we're happy to welcome you
‫between, let's just grab this from here.
‫So here we have the open hour, okay?
‫Let's change it again to 20 and yeah, nice.
‫So, ternary operator is a really important tool
‫in your React toolbox.
‫And once again, we are just using JavaScript here.
‫There's nothing React-specific that you need to learn
‫or to memorize in order to do conditional rendering.
‫It's all already part of the JavaScript language.
‫You just need to know that this is how you use it.
‫So basically, inside these curly braces
‫to enter JavaScript mode and then, well then,
‫you just use the operator just like you would do
‫in vanilla JavaScript.