So here I'm back in the app.js file. In there, in the render method which you learned is used when
creating a component by extending the component object, there
we output three persons and this clearly is kind of a list because we also have persons managed in
our state here.
It would make sense to output this as a list but before we dive into that, let's dive into outputting
content conditionally first. Let's say when we click this button, we don't really want to switch the names
as we do right now
but let's say instead we want to show or hide the persons we have down here.
For this, we can for example wrap all these persons in a div let's say, so that in the end we can show
or hide this div and automatically also show and hide everything that's inside the div, that's
the idea behind wrapping all the persons with the div.
So that's the first step,
the second step now is that we need to change this method, I'll name it to togglePersonsHandler
and we'll no longer pass an argument to this method.
Now with that, I will go back to the old syntax of not using a function which returns another function
call but just passing a reference. I also need to create a method called togglePersonsHandler,
so I will add it here above the render method
and we could use both syntaxes, this syntax here which will create a method, in here we will have problems
if we want to use the this keyword though
and since we will call this method here upon event fired in the dom, this would lead to real problems.
So I'll use the other syntax of assigning an arrow function to a property,
it will also create a method in the end,
it's just a different syntax and due to the internals of javascript this makes sure that this, the this
keyword inside this method always under all circumstances returns to this class,
So I recommend using this. Now in there,
I now want to toggle some property which in the end decides if ever we want to display this div with
the persons inside of it or not.
So first of all, I'll go to my state and add a property, I'll name it showPersons, the name of course
is up to you
and I'll set it to false initially.
Now if it is false, I don't want to show the persons and how can we now render this dynamically?
Well we can go to the div and in other frameworks like in Angular or in Vuejs you would now
place a directive on this div, for example in Vuejs if you know that, we would have v-if.
Now react works different, here
always keep in mind we are working with javascript only, it might look like html here but it is
jsx,
it is just syntactical sugar for reeact create element,
so in the end here, we have javascript code,
hence we can work with it as we can work with javascript code. If we want to render this dynamically,
we can enclose it in single quotation marks, the whole div wrapping the persons not the outer div, the
inner div.
And now between the quotation marks you learned, you can write javascript expressions.
That's not only true for two plus two or for reaching out to the state,
you can also render content conditionally by adding a ternary expression.
What you can't do here is add an if statement, if something then something, that looks like it would be the
right solution to simply then move the div inside of the if block here
but this doesn't work.
You actually can only use simple statements, no block statements as part of this dynamic syntax.
So between the opening and closing single curly brace.
So using an if block like this will not work but we can use a ternary expression,
we can simply check if this state showPersons,
keep in mind this is a boolean,
we assign false initially.
So this will give us true or false and now a ternary expression which is a default javascript construct
checks this condition by adding a question mark and then we decide what to do if this is true.
Well if it is true we want to output this div,
so right now the part after a question mark,
so this div, gets executed
if this is true. We also need to define the else case by adding a colon and then what we want to do
if it's not true, this is null which simply means render nothing.
This might be looking super confusing the first time you use it,
I am aware of this.
So what will the end do here is we simply take advantage of the fact that all we write here is in the end
javascript and we can interject javascript expressions into jsx with single curly braces,
you learned that. This means we can of course access any javascript property and use it in a ternary expression,
again this is a default javascript construct. A ternary expression is created by having some condition,
this doesn't have to be a property,
it could also be a check where we see if that is true.
But since this is a Boolean it is automatically true or false
but this would be valid too. Then we have a question mark to separate our check from the what to do if true
case,
and this is this part here.
Now keep in mind that we're not writing html here, this is
jsx
so in the end, we are calling react create element
if this condition is true. We're not calling it explicitly,
we're rendering this content.
But you learned that this is converted to react create element behind the scenes. And then we have
the else condition separated by a colon.
This simply means if this check here is not true,
then do this.
And since we simply execute nothing here we return null.
It basically means we'll render nothing it renders null and that is nothing.
This is how you may read this, again
may look super strange but makes perfect sense once you wrap your head around how javascript, how react
actually works,
it's all javascript.
Now with this, let's complete our logic by
making sure that the toggle person's handler correctly switches the state so we can simply set const
doesShow create a new constant in there
Which is this state showPersons.
This is either true or false it's the current state, and then we call this set state to adjust the state
and now here we simply set showPersons equal to what doesShow is not
by adding exclamation mark in front of it. This simply converts it, if doesShow is true it will
set showPersons to false,
if doesShow was false, it will set showPersons to true. And again important, this gets merged with
the other state. Set state with an object where we only set showPersons does not mean that the entire state
gets replaced with showPersons only, the old state persons, another state simply is not touched, react
merges the updated showPersons value for us into this state,
this is what's happening here. Now with that in place,
we should be able to save this code and make sure that npm start is running and then head over to your
running application. Over there,
if you click Switch Name, you now see the persons.
We get the warning we already gotten lost value that for some of these persons were not actually
setting up to bind incorrectly,
we can ignore it here though.
Actually, it even is a good thing we get here,
it clearly shows us that react didn't hide the values before,
otherwise we would have gotten this warning right at the start.
When you reload the page we don't get it,
we only get it once you click the button.
So react really only render these elements once our condition is true. If I click again,
it's hidden.
Now I can also confirm this by inspecting the dom,
if we take a closer look into a root element into the app, we see that button here and below the
button, there is absolutely nothing.
Now watch this part on the right
here once I click the button. You saw this div blink up, this is this new div with our persons,
it was really just added, rendered to the dom once the condition was true.
This is how this works in react,
now I'll just update the caption of this button to togglePersons but that's only a cosmetic change,
we already got a working conditional check. Now writing conditionals like this though does work but can
also lead to confusing jsx code
if you have a lot of possibly even nested checks, so I will show you an alternative to this in the next
lecture.