‫Another very important technique
‫that we use all the time in React development
‫is conditional rendering.
‫So in this video, and the next two,
‫we will talk about three ways of rendering some JSX,
‫or even an entire component,
‫based on a condition
‫and starting in this lecture with the & operator.
‫So, remember how way back we created this
‫isOpen variable right here in the footer.
‫So basically this variable tells us
‫if currently the restaurant is open,
‫which happens when the current hour is between 12 and 22.
‫And so now what we want to do is
‫to basically only render something here inside of the footer
‫if the restaurant is currently open.
‫And so that's what conditional rendering is all about.
‫So it's basically rendering some piece of the UI,
‫no matter if that's a piece of JSX,
‫or if it's an entire component,
‫based on a certain condition.
‫And again, in this case,
‫the condition is simply whether the restaurant
‫is currently open or not.
‫So let's actually get rid of all of this.
‫And then here, since we are going to use JavaScript,
‫let's enter JavaScript mode
‫using these curly braces once more.
‫So, as I mentioned initially in this lecture,
‫we're going to do conditional rendering
‫with the & operator
‫and that works because of short circuiting.
‫Now, in case you're not sure what short circuiting means,
‫and how it works with the & operator,
‫then please go back to the previous section
‫where I have one entire lecture about that.
‫But in a nutshell,
‫if we have some true or some truthy value,
‫such as isOpen,
‫and if we then use the & operator,
‫then the second part of the & operator,
‫so whatever comes here,
‫will be returned in case that the condition is true.
‫So let's just write something very simple here.
‫Just Open.
‫So just like this.
‫And let's check it out.
‫And indeed, it says open.
‫And so again, the reason for that
‫is the way the & operator works.
‫So isOpen is currently true as we can see
‫from this console.log here,
‫and so then, since this is true,
‫the second part of the & operator will be returned.
‫Now, let's just change this here
‫to say that the restaurant opens at 20 hours.
‫Then, here we get false.
‫And then down here, well, we basically get nothing.
‫And so that is the short circuiting in action.
‫So short circuiting means that if this condition,
‫so if this value here is false or falsey,
‫then the second part of the operation
‫will not even be executed.
‫So JavaScript will not even look at this
‫and then nothing is rendered.
‫So the result here is then true,
‫which is the result of this,
‫but the React doesn't actually render true
‫or false into the DOM.
‫And so that's why this works.
‫So let me show that to you actually here very quick.
‫So if we write false here,
‫so a Boolean value,
‫then you see it's not showing up here.
‫And the same is true for true.
‫So that's not there.
‫Okay, let's just write something a bit nicer here like,
‫"We're open until"
‫and then here, let's read the closed hour
‫and then format it just a little bit.
‫"Come visit us or order online."
‫And since we're already here,
‫let's also create this small button that we have down here.
‫Now, right now here we cannot see anything,
‫so let's put the open hour back
‫so that our restaurant is actually open.
‫Nice.
‫And now let's wrap this entire thing here into a diff.
‫So diff with the class name of "order".
‫Then let's wrap this here
‫and then create a button with the class name of "btn" order.
‫And then we get all the styles
‫from the style sheet that we included at the beginning.
‫Beautiful.
‫Now just notice here that we're doing exactly
‫what we learned in the lecture about the rules of JSX,
‫and in particular,
‫we are inside this JavaScript mode here
‫returning some more JSX,
‫which is perfectly fine.
‫As we learned in the end,
‫this is just a JavaScript expression as well.
‫And so this is why this thing works.
‫Nice.
‫So this is a good use case of conditional rendering.
‫Let's check out another one.
‫So, let's say that we only want to render this menu here
‫in case that we actually have some pizzas.
‫So first of all,
‫let's actually get,
‫yeah, actually it's here.
‫So basically, we only want to render this list
‫in case that we have some pizzas.
‫So to start,
‫let's actually create a new variable here quickly
‫which I will call pizzas
‫and I will set it equal to pizzaData.
‫And then here, let's use that.
‫And then let's, pizzas.
‫And then let's do conditional rendering again.
‫So our first start in a way that's not really going to work
‫but let's roll with it for now.
‫So we can again, do pizzas.
‫& and &.
‫Well, then this.
‫So let's cut that, paste it here,
‫and there we go.
‫And so our pizzas are still here
‫because pizzas is a truthy value.
‫And so this behavior of the & operator
‫does not only work for true and false values,
‫but also for truthy and falsey values.
‫Now, the problem with this is
‫that let's say that actually we have no pizzas.
‫So pizzas equals an empty array.
‫Well then, it actually appears as though this is empty here.
‫But if we inspect,
‫we see that the list itself should still be there.
‫So you see, we have here the empty list.
‫so it's empty because of course
‫we have no pizzas to loop over,
‫but UL is still here.
‫So this here is still being rendered.
‫And that's because an MT array is still a truthy value.
‫So what we need to do here is to basically check
‫for the length of this array.
‫So let's do numPizzas=pizzas.length.
‫All right.
‫And so now when there are no pizzas,
‫then this will become zero,
‫and so if we check based on this,
‫then this is now a falsey value.
‫And so if it's false,
‫then this here will not get rendered.
‫So let's see what happens then.
‫And...
‫now we get this weird zero.
‫Hmm, why is that?
‫Well, it's because of short circuiting again.
‫So when the & operator short circuits,
‫it will simply not evaluate this part,
‫but instead the result of the operation
‫will become this one.
‫So, this is zero,
‫and so therefore that's what we get in the UI.
‫That didn't happen down here
‫because as I mentioned,
‫React will not render true or false value
‫but it will happily render a zero.
‫And so that's why we get a zero.
‫So as a conclusion,
‫we should never, ever have this here as a number.
‫So we should always try to have a true
‫or false condition here.
‫So let's do this.
‫If there are more than zero pizzas, do this.
‫And if not, while then don't render anything.
‫And so this here is the result that we were looking for.
‫Let's put it back just to see.
‫And then our pizzas are actually back.
‫Nice.
‫Now because of this behavior here that I just showed you,
‫so that sometimes a zero can show up in the UI,
‫many people say that we should actually
‫never use the & operator to do conditional rendering.
‫Now I don't really agree with that
‫because sometimes it's nice to very quickly
‫do some conditional rendering with this,
‫but also usually, I do prefer the ternary operator
‫to do conditional rendering.
‫And so that operator is up next in the next lecture.