So what we are going to do now is to create a pattern such that it can't be a taco show and hide and
we are going to change the function of this pattern so we can go to the app J.
S. and now this is not to change the name.
We are going to talk all the show and hide and also things.
We are going to set a true force of the show and hide.
So we have to create a new state which is so copied and also set so can't
so we set that initial stage to be true so that when the website you'd stop it.
So the card.
Also we have to create a new fungus on total so far.
And here we go to use the.
So talk to be extend reason of the show card which means if the original value is false it will change
too true true.
We will return to fourth.
So now we can buy to these bottle
to create a conditional rendering we already can imagine what we are going to do is to show the card
if the show cut is true.
Otherwise you will hide a card.
So there is if else questions.
And here we need a ternary operator to turn to me.
Operators like this.
This is actually the soft form of the if and else.
Here is an example if a slash time b c is equal to a l c is equal to B so actually this is the condition.
And if this is to be real code eight otherwise this is B.
So in this case we will also like this if the sole card is true we do not need to use equal equal to
two because this already equal to check whether this is true.
If this is true we want to show the card.
Otherwise we said no we do not want to show anything.
So back to the TSX here we can create a graph of Square
if this is true then we will show the card.
Otherwise this will become No.
And now we can test the website it already can talk all the show and hide on the card.
And actually if you already know that there is no else face actually we can delete this one and change
the question mark to a double N.
And you can check this again in auto work and there is a better way to make this GSA cleaner is to extract
a whole bunch of code back to the javascript area
we can paste it in here.
And since we already at the javascript area so we do not need the cardio braces.
And back to the J S x we used the mock up to override the always you know cut area.
So we set a top mock up here
and we did it the space.
There will be an area.
If we page these mockups apart and they change and change name handler because we used these to function
before it initialize.
So we need to cut this out and paste at the bottom of the functions and we may also need to better uh
move the buttons up under the functions so we delete the space again so let's save it the NSF I'll try
again.
So it still work.
So this is how to create a conditional rendering.