In the last lecture, we learned how to render a content dynamically, conditionally I should say and that
we simply take advantage of the fact that everything here is javascript and that's generally the mantra
of react,
everything is javascript.
I also mentioned that using this ternary expression as we do here is not necessarily optimal, here
it's perfectly fine
but as our application grows and as we possibly nest conditions, it can be hard to keep track of which
expression is responsible for what
and to spot them in our jsx code.
So there is a cleaner solution for that which I want to show you in this lecture,
let me remove this curly brace and this ternary expression here
so that for the moment all the persons are rendered all the time again.
I should make sure to only remove the expression parts not the div though.
So with that we're back to the starting point, right now we can't toggle this.
Now keep in mind, everything is javascript and in the end what we're doing here with jsx is just that
we're returning it with the return statement in this render method.
Now there is one important thing to keep in mind, when react renders something to the screen, when it
decides that it needs to update the screen, it executes this render method and not just the return expression
there, everything here.
So everything inside the render method gets executed whenever react re-renders this component and therefore
we could take advantage of this,
we can add some code here before we return something.
I'll add a variable named persons here which I'll set to null.
Now this should be the default,
you could give this any other name you like,
then I'll add a normal if statement.
I can do this here because I'm not inside jsx,
I'm inside my normal javascript code here, and there I now want to check if this state.showPersons,
keep in mind showPersons is a Boolean so it's either true or false.
We don't need to necessarily compare it to true or false,
we can omit this. So now I have this check and if this is true then I want to set my persons variable
to some jsx code and always keep in mind,
I could also just set it to the result of react create element, this is just what jsx compiles to in the
end.
Now I will grab the code here,
My persons,
I will cut the div down there with the person inside and add it in here.
Now what I'm doing is the following,
By default, persons.
this variable, is null.
But if this state showPersons is true, persons actually holds this jsx code and with that I can
just take that persons variable and output that down here in my jsx code
I returned in the end. So if single curly braces I can output persons here, referring to that persons variable
which is even now by default or persons if showPersons is true and since render gets called whenever
react checks if it needs to re-render this page or this component I should say. Since this happens every time
a re-rendered occurs, we make sure that we always take the latest state we have into account and either
render nothing or the persons because keep in mind one of the two things triggering an update is a state
change.
Now with this, let me save this file and go back to the application.
There we go to the console, we don't see an error.
I can reload the page to clearly see that we are using the latest version
and now let me click Toggle Persons and as before, you see the same behavior.
We can re-toggle this but now we're using this more elegant way of kind of outsourcing this check
from the jsx we return to a variable we conditionally assign before returning.
Still in the render function though
but before returning this. With that, we keep the jsx we return and therefore our core template of this
component
you could say, we keep it clean and we make sure that we only have this tiny reference here,
persons, inside of it to either end or nothing or all the persons.
This is actually the preferred way of outputting conditional content and it's the way I would recommend
using.