Okay.
In this video we will be talking about conditional formatting.
So basically, our goal is to toggle some kind of views based on some condition.
So this will be classical if and based on that condition, we would like to show something or hide something
or do something on our page or display different kind of content.
So we have a few ways to do that in React, and I will show you different examples.
So first I'm inside the let's do that in the app application, which is up here.
And we have, let's say that create alert that we well, okay, I will create a new function here and
then I will create a function that will be our component and we'll say show message.
Like that.
And this will be our message here.
So what I can do is return.
And we can do H2.
My message like that.
So I have a component, quick component here, show message.
And what I can do is I can display it, display that below my component, below my footer.
And then we have my message here.
So what if I would like to have that display based on some conditions?
So what I can do is let's say we can pass some conditions into that component so I can do to show and
then I can do.
True like that.
And then I can receive it in props like that.
And I can do a condition here.
So if props to show, then I will do this.
Health.
I can do something else, for example.
For beaten like that.
So my message is displayed here because I passed through if I will pass.
False.
You can see forbidden.
So this is the way we can actually decide what kind of content goes into our page.
We can have a normal JavaScript if conditions based on some conditions here and we can return it here.
So basically that will work for anything.
What we have on our page, for example, we have our application here and we return this.
So what I can say is I could do a condition if some conditions are met, then return this otherwise
return.
For example, we can do if.
User login.
Then.
Display this.
And then otherwise I can do something else.
Health.
I can do it the same thing as I've done here.
So forbidden.
And then user login.
I can set this.
User login I can do.
So if I will run it now, you can see entire content is forbidden.
But if I will have a login user in my application, you can see everything is displayed properly.
So basically everything what I have written, I can wrap it in any content and I can use condition and
return my return.
Any HTML or js part of this return and this will be printed.
So that's one way to print it.
I will revert it back to what I had before, just to not mess too much with the code.
It will be easier to read later on.
And then also I can remove this.
So basically we might have typical if inside our JavaScript and based on that, if we can display certain
parts of our page, another way to display things will be to use that inside HTML.
So what we can do, I'll mention that before when we use curly brackets like this, that means we can
run any JavaScript there.
And what we can do inside, we can have a ternary operator.
So what I can say is maybe I can move to our component where we have something to use like this one.
So we have a footer with some state, so I can use this maybe inside the footer.
So we at the moment we have this page by Christian and then input.
What I can do here is I can have this curly brackets and then I can have a ternary operator which is
inline if condition if condition statement.
So I can do this state and let's say I can do H like this if that's equal to.
35.
Then I can do something so I can do two things.
And I will show you that in a second.
So that's all about what I have now.
And then we we have in this syntax, we have condition, which is this one.
So we check if our state H is equal to 35.
If so, this is if and then if if it is, then this will be printed.
If it's not, this one will be printed.
So if we save it now you can see, yes, it's printed.
So if I will compare it with some other age, this is printed.
So basically that's a ternary operator in line operator and we can use it directly inside our HTML here.
And this condition may be any condition we like.
So we might have.
Uh, for example, login and logout a login user here.
And we can also validate that important part here is that we don't, we don't need to keep it like a
simple text here.
We might have the entire elements there.
So what I can do is I can do like that.
And inside this parentheses I can let's wrap the entire content here and I can put it.
There.
Uh, this kind of starts to look very weird.
And now.
And we have an error because we are.
And we should.
It'll return only one element from from this.
So what I need to do is I could do a react.
Fragment and then wrap it everything inside, react, fragment, and then the error is gone.
So basically we have H2 tag and the input inside React fragment.
So I display this.
All of this when the age is 36, it is not.
So you can see here no footer is displayed.
And then we have this one if I will change it to 35 in the same way as I compare it before, you can
see everything is displayed.
So we at the moment we have age 34, 35.
So in here we can have another version of this.
So we are not restricted.
To display this as a simple text, we might have something here so I can say.
I will remove this.
And I can say.
And then I can have, for example.
They may have two different.
I may have two different outputs, two different parts of this.
And then if I will have like, for example.
Now, if I will make it like this, it will have more sense.
So we will kind of compare state is login.
So if it is login, then it will display this.
And you can't see this content and we display it.
You must be logged in.
That's what we display there because it's login is false.
And then if I will make it true, you can see this is display.
So that's another way how we can actually toggle things and display certain parts of our application
based on certain conditions.
So we have a few ways to do it, a few ways to write our syntax.
One will be inline like this and then the first is the condition.
Then you have question mark and then this section here is when this condition is met, then it will
be displayed.
And then we have colon and then you have another condition.
And if that is not met, then you will have another or you can use normal function and inside JavaScript
you can return a content based on the condition you pass it.
There.
So that's a conditions in React and they are used very often.
And I have to say I don't really like this syntax that much, but there is not much I can do about it.
Usually I go for something like this and it's sometimes really hard to read where where is the section
starting, where it's ending and so on.
But that's how the react works, so we just need to get used to it.