1
00:00:01,000 --> 00:00:03,140
In the last section we got this loading spinner in.

2
00:00:03,170 --> 00:00:07,310
But as we discussed at the very end of the video showing the text loading is kind of unclear.

3
00:00:07,310 --> 00:00:10,510
So in this video I want to make sure that we can customize that text right there.

4
00:00:10,580 --> 00:00:14,740
And we've kind of already gone through this process of customizing and component remember anytime that

5
00:00:14,750 --> 00:00:19,290
we want to customize how a component looks or behaves we're going to pass some props into it.

6
00:00:19,490 --> 00:00:23,040
But in this case there's going to be just a little bit of a twist.

7
00:00:23,330 --> 00:00:29,930
Let's first begin by receiving the props object right here inside of spinner and then rather than having

8
00:00:29,930 --> 00:00:34,730
the hard coded text of loading right there I'm going to try to reference something like let's say prop's

9
00:00:34,730 --> 00:00:36,770
stot message.

10
00:00:36,770 --> 00:00:41,600
So now the expectation is that any time that we make use of the spinner component we should pass in

11
00:00:41,600 --> 00:00:47,100
a prop called message and that's what will be shown right underneath the little animated spinner.

12
00:00:47,110 --> 00:00:54,960
So now we can go back over to the index file find where we use the spinner and then put a new prop in

13
00:00:54,960 --> 00:01:04,610
here of message and I'll give it a value of something like accept please will ask nicely please accept

14
00:01:04,850 --> 00:01:07,730
location request something like that.

15
00:01:08,510 --> 00:01:08,740
OK.

16
00:01:08,760 --> 00:01:13,740
So now if we flip back over we'll see please accept the location request and now it's a lot more clear

17
00:01:13,740 --> 00:01:18,570
to the user that I have to respond to this thing right here before the application is going to actually

18
00:01:18,630 --> 00:01:19,820
do something.

19
00:01:19,830 --> 00:01:21,560
Now what we have right now definitely works.

20
00:01:21,570 --> 00:01:23,670
It's just fine.

21
00:01:23,670 --> 00:01:25,460
However I want to point out something interesting.

22
00:01:25,470 --> 00:01:30,390
Remember we put together these spinner as a separate component so we could reuse it in the future if

23
00:01:30,390 --> 00:01:35,160
we wanted to just about every project in the world needs a spinner component.

24
00:01:35,280 --> 00:01:38,040
And that's what we created as a separate thing.

25
00:01:38,040 --> 00:01:43,380
Now I want to show you what would happen if we use the spinner component in some other context with

26
00:01:44,010 --> 00:01:47,330
getting to put that message Propp in.

27
00:01:47,330 --> 00:01:48,560
So I got to highlight the message.

28
00:01:48,590 --> 00:01:50,650
And I'm just going to cut it out for a second.

29
00:01:51,050 --> 00:01:56,990
So if I forget to put that thing in we now just get the spinner by itself which is pretty predictable.

30
00:01:57,200 --> 00:02:03,470
Rather than showing Robsart message inside of that div we no longer have a message and so nothing appears

31
00:02:03,470 --> 00:02:03,960
there.

32
00:02:04,250 --> 00:02:07,370
But you know I would say that's not the best thing in the world.

33
00:02:07,370 --> 00:02:11,650
It's entirely possible that you and I might forget to put a message property inside the spinner.

34
00:02:11,750 --> 00:02:13,880
And if we do I don't want to show nothing here.

35
00:02:13,880 --> 00:02:18,740
I want to show something else some default text like we had before of loading.

36
00:02:18,830 --> 00:02:20,810
So there's two ways that we could accomplish this.

37
00:02:20,810 --> 00:02:26,900
Two ways that we could get some default text into your I could either turn this into a little or expression

38
00:02:27,210 --> 00:02:33,500
by putting in an OR statement and then putting in some default tasks like loading like so that's one

39
00:02:33,500 --> 00:02:34,680
way I could do this.

40
00:02:35,620 --> 00:02:40,630
But if I flip back over it definitely works but there's definitely a better way to approach this.

41
00:02:40,630 --> 00:02:48,250
Let me show you the better way if I want to after I defined my component I can define something on the

42
00:02:48,250 --> 00:02:53,090
function itself called default prop's.

43
00:02:53,150 --> 00:02:54,940
This is going to be an object.

44
00:02:55,100 --> 00:02:59,640
And as you might guess this is going to provide some default properties to this component.

45
00:02:59,810 --> 00:03:05,780
So essentially if we forget or we decide to not put in a message when we create an instance of the spinner

46
00:03:06,020 --> 00:03:10,340
we will instead use the default Propp listed down here inside this object.

47
00:03:10,340 --> 00:03:14,840
Now like I said this is basically the same thing as doing something like this.

48
00:03:15,040 --> 00:03:16,850
But it's definitely a little bit more elegant.

49
00:03:16,930 --> 00:03:21,700
You know if we were making reference to prop some message several times in this component we would have

50
00:03:21,700 --> 00:03:24,190
to put these or statements all over the place.

51
00:03:24,250 --> 00:03:30,040
And so in general if we want to have some defaulter alternate value for our prop we'd like to use this

52
00:03:30,130 --> 00:03:31,310
default prop's thing.

53
00:03:31,600 --> 00:03:37,820
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

54
00:03:37,820 --> 00:03:40,130
be loading like so.

55
00:03:40,130 --> 00:03:46,250
So this now means that if we make a instance of the spinner component and we do not pass in a message

56
00:03:46,280 --> 00:03:54,350
Propp we don't pass in a message Propp it will be provided a default of loading dot dot dot.

57
00:03:54,380 --> 00:03:58,170
So now we can flip back over and we'll see that it's back to the original loading.

58
00:03:58,220 --> 00:04:01,900
Even though we did not actually specify a message.

59
00:04:01,910 --> 00:04:07,040
Now of course like I mentioned just a little bit ago we do want to customize the message here so I can

60
00:04:07,310 --> 00:04:10,900
paste back in the message of please accept location requests.

61
00:04:10,910 --> 00:04:16,220
Now that we are providing a proper message to that component we are not going to override the default.

62
00:04:16,340 --> 00:04:18,320
I mean yeah we are going to override the default.

63
00:04:18,320 --> 00:04:19,090
I apologize.

64
00:04:19,190 --> 00:04:22,880
We are going to override the default so no longer are we going to use message.

65
00:04:22,910 --> 00:04:25,130
We have provided the prompt message here.

66
00:04:25,130 --> 00:04:31,010
So if we save this we'll see that it turns back into a please accept location request OK.

67
00:04:31,030 --> 00:04:32,160
So that's it.

68
00:04:32,400 --> 00:04:34,960
In general it's really nice to use default props like this.

69
00:04:34,960 --> 00:04:39,090
Anytime that we are making it very reusable components because it's good to make sure that you can just

70
00:04:39,090 --> 00:04:44,370
create an instance of spinner and get some good result without having to look up exactly how to customize

71
00:04:44,370 --> 00:04:45,370
this thing.

72
00:04:45,390 --> 00:04:45,610
All right.

73
00:04:45,610 --> 00:04:47,100
So let's take another quick pause right here.

74
00:04:47,220 --> 00:04:51,780
When I come back the next section there's one last little thing that we're going to touch on very quickly.