‫[Instructor Jonas] To finish this project let's learn
‫how to conditionally set some text inside elements
‫and also how to conditionally set class names.
‫So if we take one final look at our final project
‫the only difference is that this pizza here
‫that is sold out
‫has this text of sold out instead of the price.
‫And the whole element here is kind of grayed out.
‫So just to show that it's not available.
‫And so let's now do that.
‫So right now we have this line of code here
‫which makes it so that is sold out pizza
‫is not even displayed.
‫So let's start by getting rid of that.
‫And so now we are ready to conditionally display some text
‫and we are going to do it right here.
‫So the difference between what we did before is that
‫before we did conditionally render this entire element here
‫but now that's not what we want.
‫Now we already know that we want this span element here
‫but we don't want the content yet.
‫And so let's now conditionally set that,
‫and that's very easy.
‫So once again, we are going to use our ternary operator.
‫So let's say pizza object
‫dot sold out,
‫then the text here should be,
‫and now what do you think we need here?
‫Well, it's just a string actually.
‫So, sold out.
‫And if not, then we want the pizza's price.
‫Give it a save and,
‫yeah, nice, that worked.
‫Let's just make it uppercase.
‫It should be handled by the CSS,
‫but we can also just do it like this now, right?
‫So let's again appreciate the difference here.
‫So we're not setting the element conditionally,
‫which of course we could.
‫Let's just quickly do that because why not?
‫So we could say,
‫if pizza object
‫not sold out
‫then display this span with sold out
‫and if not
‫then display the span with pizza
‫dot price.
‫So the result is going to be exactly the same
‫as we see down here,
‫but what we did is fundamentally different.
‫So here we already know that we want a span element
‫we just don't know yet the content.
‫While here, we apparently also don't know yet
‫what element we want.
‫Though in both cases we are then using a span.
‫And so I think it's a lot better to do it like this.
‫So to conditionally set the text content of an element
‫this is way cleaner in my opinion.
‫But just for reference, I will leave this one here as well.
‫Okay. And now finally, as for the class name,
‫whenever the pizza is sold out,
‫we can add the sold out class to the LI,
‫which will then make it grayed out.
‫Let me show that to you.
‫You can simply add it to all of them.
‫And so then you see this is the result we are going for,
‫but of course we only want this part here
‫whenever the pizza is actually sold out.
‫So let's again use our ternary operator for that.
‫So this is how we're going to do it.
‫We will now use instead of a regular string,
‫a template literal.
‫So deleting the quote and deleting this.
‫But now this is actually JavaScript.
‫So a template literal is JavaScript
‫therefore let's enter JavaScript mode.
‫Give it a save.
‫And so for now, it is exactly what we had before.
‫But now inside this template literal, we can,
‫well kind of enter the template literal
‫JavaScript mode as well in this way.
‫So remember that it's actually quite similar
‫the idea then entering JavaScript mode inside of JSX, right?
‫The difference here that in the template literal
‫to add some piece of code we also need this one, right?
‫So this dollar sign.
‫But then here we can once again
‫make use of our friend the ternary operator.
‫So we can say pizza object
‫sold out.
‫If yes, then here give us the string of sold out.
‫But if not, then just an empty string.
‫And this should be enough.
‫And yeah, beautiful.
‫So this is exactly what we were going for.
‫So let's recap why this worked.
‫So we have our template literal,
‫and then here we simply write a JavaScript expression.
‫And so then with the ternary operator,
‫we check if this exists and if so.
‫So if this is true,
‫then the result of this operator will be sold out.
‫And so then this entire thing here becomes sold out.
‫And then the string is exactly what we had before.
‫So pizza space sold out.
‫But if this is false,
‫then we will simply return nothing here.
‫So then the string is just pizza,
‫which is well what we have here in all of these cases.
‫So you see here the class is just pizza
‫with the space of course that we have here,
‫but that's no problem at all.
‫And then here we have pizza sold out.
‫Great. So this is how we conditionally set
‫some CSS classes onto elements.
‫So all without using the classless property
‫that we would have to use in Vanilla JavaScript.
‫And for this down here, remember in Vanilla JavaScript
‫we would have to do some damage manipulation
‫with the text content property
‫or inner HTML or something like that.
‫But here with the declarative nature of JSX and React
‫everything becomes just a little bit easier
‫and nicer to work with.
‫And now just one final detail.
‫Let's come here to our public folder.
‫And in the index dot HTML
‫we will want to set now the title of the document.
‫So here we have Fast React Pizza Co.
‫But here it just says default React Up, which is a bit ugly.
‫So let's say Fast React Pizza Co.
‫And that's it.
‫So at this, we actually finished our application
‫and our very first project.
‫So congratulations for making it all the way here
‫until the end of this long section.
‫And now just to finish this section
‫we will have a lecture to review everything
‫that we just learned because it was a lot.
‫And then finally,
‫there is another coding challenge waiting for you
‫just so you can practice again what you learned here
‫over the last few lectures.
‫But before going there, I would invite you to once again
‫check out the entire code that we wrote here together
‫see how all the components are related
‫and really check out again
‫everything that you learned even before checking out
‫that summary lecture that's going to follow.
‫And then after that, of course,
‫watch that lecture to really drive the message home.