Before we deep dive into our second project why don't we also take a look at the conditional rendering
in the JSF.
And we technically could have covered this all the way in the beginning.
However I do find it a little bit more useful as we have more information about the react that would
be number one and number two when we can actually implement it with some kind of button clicks because
I think it's gonna be much more interesting.
So for us what I would like to do is get rid of this handle the late so I don't want to delay the item
because I have kind of a very limited real estate here so I might as well just work with whatever items
we have.
So going to delete both of these things and then we're gonna set up a new button.
Then again we're gonna say but.
And now for the button again WE'RE GONNA HAVE SOME TYPE TYPE IS GONNA BE button.
So let's make sure we do that and then we're gonna have some kind of on click.
So for in this case let's right on click.
And now we're gonna be setting up this function.
We haven't set up anything of course yet but we're gonna have like say some kind of handle info and
you'll see why we're calling this that.
So we're gonna say okay so there is gonna be a function going to call this and all and the whole info
or toggle info doesn't really matter.
And then we're not gonna pass any kind of parameters here or any arguments.
And what is it gonna be working Wednesday and what I would like to right now set it up in a state is
the Show Info variable.
So I'm going to say there's gonna be a variable by the name of a windfall.
And by default right away this is gonna be true.
So that's gonna be my setup and then I would like to toggle this as I'm clicking this button.
So why don't we set it up with the handle and phone.
Why don't we see and all in full that's gonna be the name of my function.
And I was in this case I do need to add there's not a not going to be working with this info and here
we'll go and say toggle info and so far we have the button that's gonna be toggling.
Why are we working with right now these methods as well as here in the state.
Well what I'm trying to show you is that what happens has you working with J a 6 and if you would like
to have some kind of conditional statement because the issue is very simple here.
So let's say that we have these show info is true currently at the state.
And let's imagine there's some kind of paragraph here and within the paragraph I would just like to
show this paragraph.
If the value is gonna be equal to true.
Well how you would do this normal in JavaScript since you are thinking probably well I have the curly
braces so I have the javascript.
So why don't we try it out.
Why do I say if.
And then we're going to be looking for these dot state and then we're going to be looking for show info.
The issue is that this is not going to be an expression.
And if you remember correctly we cannot run something here that is not an expression.
So we always need to return some kind of value and if statements are not going to be allowed.
So we're gonna have to come up with some creative ways how we can avoid the worry.
There's three of them and we're going to look at as well as later on as we're going to be working on
the project.
There is actually going to be a fourth one which in my opinion is even a little bit more interesting
meaning that that is going to deal basically with this whole thing with this whole return.
And that's why I'm saying that this is going to be a little bit more interesting these ones we're just
dealing with specific info.
Let's say some kind of paragraph some kind of heading for is the fourth one that we're going to look
at in the project is gonna deal with the whole book or whole component something like that.
OK here what would be our choices.
Well we can start with a conditional rendering or for conditional rendering what do we have.
Well we have a setup where we have a hand.
So if we have two hands then basically that next thing is gonna be shown.
Also we have an option of ternary operator as well as we can have the separate function.
So why don't we start with an end.
So how the end is going to work.
Well first of all I can say like this I'm gonna say that I'm gonna be checking the value in a state
that stage 0 in form and if I'm going to say and and now if the value is going to be true then I would
like to render here the paragraph.
So in this case this is going to be my return.
So I'm going to say I'd like a on this case.
This is gonna be 20.
So now let's see what will happen.
The moment we show it.
How is that this is gonna be shown.
So the paragraph is showing because the value in a state for the show is meaningful is true.
But what if we're going to change this one if I'm going to say something like this.
Now all the paragraphs are not going to be shown because this only works if this value is true.
So if this value is going to be true the first one then the second one is gonna be returned or if this
is going to be false then nothing nothing is going to be sure.
All right.
So that would be our first one there would be and.
And you know what since I want you to keep the reference I will going to comment this out and then we're
going to continue and now we're going to look at the ternary operator.
So how the ternary operator is gonna work.
First of all why don't we set it up this with a button.
Like I said before.
So why don't we go here and we're gonna say that we we're gonna be looking for this dot set state and
then within the state we would want to have the show in full value know since I would want to toggle
it.
I'm gonna set it up like this.
I'm gonna say whatever value you have right now in this dot state show in.
Give me the opposite.
So if by default this is going to be true the moment we're gonna press it then the value is gonna turn
false as well as if we're gonna have it as a false and then we're gonna turn it back to a true.
So that's the idea how we're gonna be working with.
So we right now have this toggle info.
And by the way we can check it out again in the Google Developer tools so we can say inspect or react
developer tools.
We can say like this we're going to be looking for the react.
And then as we make this bigger notice we have our first book.
And what do you see or hear.
We have the show and what folks or what's gonna happen if I'm gonna collect but this is gonna be true
false true false true.
So we're Toggling it.
Everything is working exactly like we want.
So by the way if we're gonna head over back and uncommon this just to show that this is gonna work obviously
with the button because in the beginning I just showed you with changing the value of the state.
And as you can see and this is only going to be affected again where I'm clicking since each of them
are gonna have their separate state not sure what else we have.
Like I said we would want to look at the ternary operator that's gonna be our best friend and the way
the Terry operator works.
Again we're gonna be checking the value.
So there's that state show in.
However here we have a question mark.
And now in this case if the value is through again we're gonna be doing the same thing where we're looking
for the paragraph and in this case you know what let's write like 10 words because I think this was
a little bit too much.
And if the value is going to be false I'm gonna be returning now.
I understand that this might look a little bit foreign to you because we are not used to as will work
with javascript but within the react we can do it like this and say you know what if the value is gonna
be false then just return.
And what that would mean is that as we're gonna be clicking again we're gonna be doing the same thing
where we will gonna be hiding our info.
Okay.
Now let me come on this guy out as well.
Just so you can see and you know what maybe with me and some kind of comments here.
Let's say then this would be and then this is gonna be ternary Perry to Now let's set up the function.
So this is also going to be something real interesting.
Although these were also cool but I just find the functions little bit more cool.
Okay so I'm gonna go whereas my render basically above the return so I don't want to do it in return.
And I'm gonna set up some kind of function somewhere seconds and we're gonna name this check info and
that's gonna be the name of our function.
And here we're gonna be passing the info.
So some kind of parameter.
Again you are you can guess at that.
This is what we're going to be passing in how or in this case this is just going to be a parameter.
And then now it can set up actually the state since again this is not going to be Jeff Sachs.
We are working with normal jobs.
So here I can see if info.
So if info the parameter you're passing is gonna be true.
Dan I would like to return something to say OK so now give me back my JavaScript in my return.
So let's say for J OSX sorry paragraph a law and I don't know.
Again 10 and then if the value is going to be false just sales on again let's return.
I'm not going to be returning No that's gonna be our set of fully everything looks fine here so we have
if this is true then whatever.
But you know what.
No at some point this is gonna give me an error.
And the reason for that because I haven't set up properly the actual hero function.
So this would be my check for what's really cool about this function that I can just run my function
here and what I'm saying here again in the function is gonna be check in full and then within the function.
The argument that I'm passing here for the info here is gonna be from the state.
There's the state show you guess that show info.
Again the same situation.
We have some kind of parameters since right now we're returning.
So again remember we're running this function since we passed it.
It's not like we have passed it has a reference.
We're actually running the function because we're passing the value right away.
So the moment it runs it's like OK this is true right now.
So the true state.
Awesome.
Then once I click it again it's not showing showing naturally and so on and so forth.
And that's how we can use the conditional rendering in the GSA.