In the last section we got this loading spinner in.
But as we discussed at the very end of the video showing the text loading is kind of unclear.
So in this video I want to make sure that we can customize that text right there.
And we've kind of already gone through this process of customizing and component remember anytime that
we want to customize how a component looks or behaves we're going to pass some props into it.
But in this case there's going to be just a little bit of a twist.
Let's first begin by receiving the props object right here inside of spinner and then rather than having
the hard coded text of loading right there I'm going to try to reference something like let's say prop's
stot message.
So now the expectation is that any time that we make use of the spinner component we should pass in
a prop called message and that's what will be shown right underneath the little animated spinner.
So now we can go back over to the index file find where we use the spinner and then put a new prop in
here of message and I'll give it a value of something like accept please will ask nicely please accept
location request something like that.
OK.
So now if we flip back over we'll see please accept the location request and now it's a lot more clear
to the user that I have to respond to this thing right here before the application is going to actually
do something.
Now what we have right now definitely works.
It's just fine.
However I want to point out something interesting.
Remember we put together these spinner as a separate component so we could reuse it in the future if
we wanted to just about every project in the world needs a spinner component.
And that's what we created as a separate thing.
Now I want to show you what would happen if we use the spinner component in some other context with
getting to put that message Propp in.
So I got to highlight the message.
And I'm just going to cut it out for a second.
So if I forget to put that thing in we now just get the spinner by itself which is pretty predictable.
Rather than showing Robsart message inside of that div we no longer have a message and so nothing appears
there.
But you know I would say that's not the best thing in the world.
It's entirely possible that you and I might forget to put a message property inside the spinner.
And if we do I don't want to show nothing here.
I want to show something else some default text like we had before of loading.
So there's two ways that we could accomplish this.
Two ways that we could get some default text into your I could either turn this into a little or expression
by putting in an OR statement and then putting in some default tasks like loading like so that's one
way I could do this.
But if I flip back over it definitely works but there's definitely a better way to approach this.
Let me show you the better way if I want to after I defined my component I can define something on the
function itself called default prop's.
This is going to be an object.
And as you might guess this is going to provide some default properties to this component.
So essentially if we forget or we decide to not put in a message when we create an instance of the spinner
we will instead use the default Propp listed down here inside this object.
Now like I said this is basically the same thing as doing something like this.
But it's definitely a little bit more elegant.
You know if we were making reference to prop some message several times in this component we would have
to put these or statements all over the place.
And so in general if we want to have some defaulter alternate value for our prop we'd like to use this
default prop's thing.
So to use it I'm going to list the name as a prop and then the default value for it which for us will
be loading like so.
So this now means that if we make a instance of the spinner component and we do not pass in a message
Propp we don't pass in a message Propp it will be provided a default of loading dot dot dot.
So now we can flip back over and we'll see that it's back to the original loading.
Even though we did not actually specify a message.
Now of course like I mentioned just a little bit ago we do want to customize the message here so I can
paste back in the message of please accept location requests.
Now that we are providing a proper message to that component we are not going to override the default.
I mean yeah we are going to override the default.
I apologize.
We are going to override the default so no longer are we going to use message.
We have provided the prompt message here.
So if we save this we'll see that it turns back into a please accept location request OK.
So that's it.
In general it's really nice to use default props like this.
Anytime that we are making it very reusable components because it's good to make sure that you can just
create an instance of spinner and get some good result without having to look up exactly how to customize
this thing.
All right.
So let's take another quick pause right here.
When I come back the next section there's one last little thing that we're going to touch on very quickly.