All language subtitles for 055 Ternary Operator.en_US

Not bad, not bad.

Hopefully we are comfortable with short circuit operators.

Next, I would want to add a button to the mix so that way we'll see how we can set this up dynamically,

essentially instead of hard coding.

Of course, this will depend on the value and line will change that value using the button.

And then also would want to talk about the ternary operator and why is that useful.

All right.

So let's start, I guess, by setting up our button.

So right below the ring, one more.

Yeah, I think the heading one is going to be the best case scenario.

I'm going to go with Button.

And then again, add a little bit of styling salesclerk last name, not one is equal to a beaten and

not inside the button.

All right, doggle error, doggle and error.

And now let's imagine that we're going to have some kind of state.

So, of course, this is going to be the error state and then I'll toggle it using this button, show

up where I have the text.

And you know what, by the way, I think at this point can just come in them and I'll create another

state variable and it's going to be an error.

So I'm going to say is error.

And then, of course, we have set function as well.

Set is error.

And then in here that is equal to a used state and then by default, it is going to be false.

So by default, there is no error.

And now what I would want is to set up some kind of element, same like we did with adding one over

here or you're not.

I think we can do the same one.

Hopefully you have it for your reference, because what I'm going to do right now is just change it

around a little bit where instead of relying on text, I'm going to rely on is error.

So I'm going to say is error.

And now what I'm trying to say is that if the error is true, then I want to display this same one.

So, of course, we can change the text as well.

So say here error and then three dots.

Not for the moment I save.

I have nothing to correct.

Why?

Well, because here I'm checking whether the error is true.

And we already know that with an operator only if this is true.

And of course we'll display that one unless we the expansion point.

And of course I'm checking if this is falsie or false and then I'm displaying the heading one.

So now of course, I can see it, but I actually would want to only display it if the error is true.

And I would want to use this button to toggle the error using the set function.

And the way we can do that is by adding on click over here.

Then again, only need our inline function.

And also here set is error and then all use again the exclamation point and I'll say is error.

So what's the code saying over here?

Well, I'm calling set is error, but then on all the time, grabbing the opposite value of the current

is error.

So currently is error is false.

Correct.

That's the default for the first time I click it, it's going to check.

All right.

What is the value that is false.

So let me flip it error to true, because that is going to be opposite.

And of course, the next time when it is already true, then again, we on the same function.

Now, of course, it will change it back to false.

So essentially we set up a toggle state where the moment I click notice now I'm displaying the error.

Why?

Because I change the value in a state.

I change it from false to true.

And I think this would be a good use case for reactive tools.

So let's go localhost and line three thousand.

And remember, we had to look for components here, so let's say where it as word as profile components

and of course we have a short circuit and check out the state where half state is false.

So the moment I click Norrish now, it's going to be true.

OK, so again, once we click, we flip it back to false.

So essentially this is how we're toggling the state and as we're toggling the state, we're also toggling

this one because we're using the and operator.

And only if this is true when display, if it is false.

And of course, we don't display it right now.

Take a look at the ternary operator and the difference between the ternary operator and the and or operator

is the fact that ternary operator will give you two possible values.

So, for example, in this case, I'm checking for Izarra and only if it's true, then I'll display

how with Ternary Operator, we'll display something if it is false and then something else if it is

true.

Again, it is just a job script thing.

So if you need to go and brush up on that, please do so you can Google it or you can use my playlist.

It's up to you, but essentially will deal with ternary operator and syntax for three operators following

where we have a question mark.

Then we have first thing that we would want to show if it is true, and then the second thing, if it

is false.

So in our case, I think I'm going to do the same thing, which is error.

So let's set up the curly braces first.

Again, will check for is error, whether it is true or false.

And then the syntax for term operators fall where we add a question mark.

And then like I said, if this is true, then we'll have our first value.

If it is not true, then we'll place the value after the column.

So in our example, one one of the like.

Well, if it is true, I would want to display a paragraph and I'll say some kind of text.

Now, again, keep in mind, you can set up whatever you want over here.

You can add ten thousand components that are sitting in one giant component.

In my case, I'm just showing you with paragraph, but sky is the limit.

Just remember that.

And as far as the text, I'm going to say there is error.

And again, we go with three dots, so this is going to be the case if the error is true.

Of course, we all know that a default is not the case.

Now, after the call and we will place what will display if the error is false.

So notice in here, we had no fallback.

We only display it if this is true.

In this case, though, we do have it.

So if this is true, beautiful, we'll display the paragraph.

However, if it is not true.

Now, let me showcase that we can set up something more complicated.

I'm going to go with Dave.

And then within a day, if there's going to be heading to and I'll say there is no error like so.

And once we'll save, check it out.

Now it says there is no error.

Why won't.

Simple because error, of course, is false.

Correct.

So if it is false, then of course we skip the first part because we check what is the value for error.

And of course it is false.

So we skip this one, the paragraph and then we right away go to the second value.

That's why we have here.

There is no error.

Now, the moment I click, notice what's going to happen.

So first I'll have my error.

We already covered up because that is, of course, are an operator.

But then I have my paragraph with there is error.

So those are the ways how we can display elements or components conditionally in react.

Because please keep in mind we cannot use if because if doesn't return the value we need to use something

that returns the value, whether that is a short circuit operator or that is a term operator.