‫So, in React, we need to define values
‫based on a condition all the time, and many times
‫in situations where we cannot use an if else statement.
‫And so let's now learn how to use
‫the ternary operator instead.
‫So in JavaScript, the ternary operator is a very
‫special type of operator that has three operands.
‫So three parts that are needed for this operator to work.
‫So let's work here on the pages value again.
‫And so the first part of the ternary operator
‫is a condition.
‫So let's say pages greater 1,000.
‫So this is a condition, and if this is true,
‫the result of this operator will be whatever
‫is after this question mark.
‫So let's define a string here and let's say over 1,000.
‫Then let's add this colon.
‫And for now, I will just write another string here,
‫and then I will explain what's happening.
‫So less than 1,000.
‫So again, the ternary operator has three parts.
‫The first part is this condition here.
‫The second part is this second operand, which is the result
‫of the operation in case that the condition is true.
‫And in case that the condition is actually false,
‫then the results of this operator
‫will be this third part of the operator.
‫And in case that is confusing, just remember
‫that an operator is a bit similar to a function.
‫So it always returns some value.
‫So for example, if we have two plus two,
‫then the operator here is the two
‫and it will result basically this four.
‫And this operator here,
‫so the ternary operator again will return this value here
‫in case that the first operand is true.
‫So this condition is true.
‫And if it's false,
‫then this part here will be the result of the operator.
‫And then we can, as always,
‫store that result into a variable.
‫So let's just call this the pages range.
‫Let's log that here.
‫And so our pages are currently 1,210,
‫which is, of course, more than 1,000.
‫And so then here, we get that pages rage is over 1,000.
‫And if we had another book, so if here a book was
‫get book ID two, well then our book still has 1,210 pages
‫because we are actually manipulating that value here.
‫Remember?
‫But let's take that out.
‫And then our book only has 295 pages, which will then
‫result here in the string of less than 1,000.
‫And so then we can use this here,
‫for example, to create another string.
‫Let's log that to the console.
‫And again, using a template literal,
‫the book has pages.
‫Range page.
‫And so now we get the book has less than 1,000 pages.
‫Let's put this one here back,
‫and go also back to book number one.
‫And then we get the book has over 1,000 pages.
‫Great.
‫So that's what we use the ternary operator for.
‫So to define a variable conditionally.
‫And let's just quickly do that here again,
‫right here in the summary string,
‫just so I can show you that we can really
‫use any JavaScript that returns a value
‫here in one of these blocks.
‫So the book has, here will be our JavaScript block.
‫And then let me just write the end.
‫Been adapted as a movie.
‫And so here, basically, if the has movie adaptation is true,
‫then we want to return nothing.
‫And if it's false, we want to return not.
‫That makes more sense if we write it out.
‫So has movie adaptation, which we can again use
‫because we already took it out of the object
‫up here in this destructuring.
‫So if has movie adaptation, then return nothing.
‫And if not, then return the string not.
‫And well, that's a bit hard to see there.
‫So the book has been adapted as a movie,
‫which makes sense because this here is true.
‫But once again, if we change this to number two here,
‫then the book, or yeah, then the book is different.
‫It has no movie.
‫And so then our string should say,
‫the book has not been adapted as a movie.
‫Great.
‫So with this, we used a conditional right here
‫inside the template literal.
‫And it would not have been possible
‫to use an if else statement here instead,
‫because an if else statement is,
‫well as the name says, it's a statement,
‫so it does not return a value.
‫So it would've been impossible to use that here.
‫And so then the ternary operator is exactly the way to go.
‫And as I said in the beginning,
‫we do this all the time in React.
‫And so this is one of these things
‫that is really important to know
‫before starting to write React applications.