‫The third way
‫in which we can conditionally render some JSX
‫or some component is by using multiple returns.
‫So, up until this point, all our components
‫only ever had exactly one return keyword, right?
‫But there is nothing stopping us
‫from adding another return keyword based on some condition.
‫So, of course each component
‫still can only return one block of JSX,
‫but that return can depend on a condition.
‫So, in other words, we can do for example this.
‫So, right here, we are outside of JSX,
‫so we are simply inside the component,
‫and so here we can write any JavaScript we want.
‫So, we can now easily use the if keywords
‫so we can say if is not open, then return,
‫for example, this message right here.
‫So, this JSX, so paste that here and that's actually it.
‫So, if the restaurant is not open
‫then this will be returned.
‫But if it is opened, then all of this here is not executed,
‫and then our normal return will simply be executed.
‫What's important here is that these two returns
‫cannot happen at the same time,
‫but that's right now in short here,
‫so let's again put it to 20.
‫And so now we get this, so exactly this message right here.
‫So, it's not coming from here,
‫so we could replace this, but I will leave it here,
‫and I will explain in a second why.
‫But anyway, now this is actually coming from here,
‫and we could of course do anything here,
‫just to make sure it is really coming from there.
‫And yeah, now the problem in this case
‫is that we are now no longer rendering
‫the footer element around this p,
‫so if we wanted to do the exact same thing,
‫we would also have to copy the footer here, right?
‫Otherwise the footer would only be rendered
‫in case the restaurant is open.
‫But if not, then no footer would exist.
‫So, this is actually, in this case,
‫not what we want all right?
‫So, usually this early return, like we did here,
‫is more useful when we want
‫to render entire components conditionally
‫but not just some pieces of JSX.
‫So let's try something else here maybe,
‫and what I'm looking for is actually this pizza component.
‫So, remember how the pizza has a property of soldOut.
‫So we can see that here in the props.
‫So, each pizza receives this pizza object now as a prop
‫and then we have soldOut.
‫So what we can do here as an early return is to say
‫if props.pizza object.soldOut, then return nothing.
‫And so with this then the pizza that is sold out
‫will not appear on the user interface,
‫and indeed there was one pizza.
‫So, that's this one here, Pizza Salamino,
‫and that's no longer here now,
‫and so that's because here we have this early return.
‫So that's sometimes a pretty common technique
‫that we can use, which is to simply return null,
‫so nothing in case there is a certain condition that's true,
‫and so in this case, this can be quite useful.
‫So for now, let's leave this here, even though later,
‫we will do something even nicer with this property.
‫So, as a conclusion
‫of these three lectures on conditional rendering
‫my recommendation is to use the return operator whenever
‫you need to return some piece of JSX based on a condition.
‫So, just for example, like this here.
‫So, this we are going to use all the time
‫but also sometimes you just want to do something like this,
‫so you want to return something entirely different
‫no matter if that's nothing
‫or if that's just some other component.
‫So for example, we could also say here
‫something that doesn't make any sense
‫but let's just try this.
‫So, we could do this.
‫So in case it's sold out,
‫we returned the header in this place.
‫So, again here that makes no sense at all
‫but that would be a possibility,
‫although not a very good one.
‫So, throughout this course you will learn
‫which of these options is the best
‫simply by practicing and using them
‫in different situations over and over again.