In this video there's one less thing that I want to touch upon around our app component.
Let's go down to the render function.
Remember inside of your We've got those two statements to check for the case in which we have a err
message and not allowed Tud or an error message in a latitude and our spinner.
Now at present there's something inside of your That's kind of deceptively hidden but it's something
would make changing this app component in the future.
Really really challenging.
Let's say that for some crazy reason we get a new requirement on this project and the new requirement
is that no matter what we're showing you get the error message via the seasoned display or the spinner
no matter what we have to show a big red border around the edge of the page.
I know that sounds crazy but let's just imagine it for a second.
So essentially I would want to have something like this say border 10 x something like that no matter
what I always want to see a border going around the edge.
Now in order to do so we would essentially have to find these three different return cases inside our
render function and surround or wrap each of these cases with maybe some device that has a class name
that would apply the actual border.
So let's take a look at what that would look like very quickly.
Now don't type out the code that I'm about to write.
I'm just going to type this out very quickly and then undo these changes.
I want to show you very quickly.
So here's what we'd have to write to get that border in here.
We'd have to put a div up there.
We you'd have to put that same div on the next return statement down here and wrap the season display
and we would have to put the same diff around the spinner like so that's more or less what we would
have to do now without a doubt we could probably figure out some way to get a CSSA class on some Piran
element to the app component.
But I think you can get the idea here if we want to make sure that no matter what case we fall into
the error message the seasoned display or the spinner was always wrapped with some particular element
we would have to duplicate that element in all three locations.
And that's my guess.
No that's not something we're going to really ever be doing.
So we're going to figure a way to work around this.
I'm going to first begin by doing those little dives.
I just stuck in here as a quick example.
And there we go.
All right.
So really the root of our problems here is the fact that we have all of this kind of conditional logic
inside of a render function.
So in order to fix this problem I'm going to create a helper function.
It's going to be a helper function that's going to contain all of the code that is currently inside
the render method.
Let's make this helper function.
And then you'll very quickly see where we are going with this.
So I'm going to make a helper function inside this body called about.
I don't know render body but render content.
That's a good reasonal then.
And then decide if you're going to take the three different cases that we fell into from the render
method are going to cut them and put them up into the rendered content instead.
Then inside of my render method I'm going to remove the comment above it.
And inside there I'm going to return some div like let's say a div that gets a border red like so.
And then inside that div I can call this dot render content like so.
So we still have all the same logic we had before but now it's all been centralized in one location
so that no matter what case we fall into here be it the showing the error message showing the season
display or showing the spinner we are always going to surround the result with a div that has a class
name of border red.
So in general anytime we make a component we always try as much as possible to have to not have multiple
return statements inside the render method.
For exactly this reason we might very easily fall into a condition where no matter what we always want
to return what gets wrapped or what gets returned from a component with some common element like so
if we have multiple return statements inside the render method doing that becomes very challenging.
If we ever have to have conditional logic as you see right here we're always going to instead put it
into a helper method.
So now when the render method gets called we're going to show the div we're going to call render content
we figure out what case we are in.
And then we return the appropriate component.
So let's save this and we're going to just make sure that everything still works.
I remember that there is no class name of border ready here no border is going to actually show up.
This was just an example to help you understand that.
Yeah sometimes you want to wrap everything that comes out of component with some common element like
so.
So I can flip back over now if I refresh the page.
Yup everything still works as expected.
I couldn't allow and I still see my content appear.
OK.
So that's pretty much it.
That is basically our entire app.
Now we've gone through a tremendous number of topics inside this application.
We spoke about classes state we saw lifecycle methods we saw default props over here.
We saw these kind of config objects.
We did a lot here.
So let's take a quick pause and then come back in the next section.
We're going to do a quick wrap up on some of the big topics that we went through and we'll go through
a couple of exercises.
So quick pause and I'll see you in just a minute.