1

00:00:00,940  -->  00:00:03,770
So appliques pretty great at this point in time.

2

00:00:03,840  -->  00:00:05,860
I think there's just one last thing we need to do.

3

00:00:05,880  -->  00:00:11,500
We need to make sure that the buttons text gets changed to something more reasonable then click me.

4

00:00:12,150  -->  00:00:17,040
So we could just change the text to something like by now inside of our button component.

5

00:00:17,160  -->  00:00:19,190
Right now here is the hard coded click me.

6

00:00:19,470  -->  00:00:20,620
But if we just change it to.

7

00:00:20,620  -->  00:00:25,980
By now we're still kind of defeating the purpose of making a reusable button component.

8

00:00:26,130  -->  00:00:31,170
So I feel like this would be a great opportunity to pass and the text Jones shown have this button as

9

00:00:31,170  -->  00:00:33,410
a prop to the button.

10

00:00:33,420  -->  00:00:35,070
Now there's two ways you could do this.

11

00:00:35,130  -->  00:00:42,000
We can either add any prop just like the on Press one of maybe something like you know text and it should

12

00:00:42,000  -->  00:00:45,260
say like by now that would be one approach.

13

00:00:45,270  -->  00:00:50,520
The second approach I think might be a little bit you know more fun with the button component.

14

00:00:50,520  -->  00:00:56,030
You know something like this is to use that same prop stock children trick that we saw earlier.

15

00:00:56,030  -->  00:00:57,320
So let's do that instead.

16

00:00:57,570  -->  00:01:06,100
If you recall we expand out the button tag and then pass some text directly in here.

17

00:01:06,450  -->  00:01:12,420
We can then get a reference to this text as props start children inside of the button component.

18

00:01:12,450  -->  00:01:20,520
So now we can go back over to our button and replace clickety with a reference to Propst children.

19

00:01:21,150  -->  00:01:28,780
So notice that I don't have a prop's object or argument here I'm destruction of the arguments list.

20

00:01:28,800  -->  00:01:31,900
So I will just restructure out children as well.

21

00:01:32,190  -->  00:01:37,750
And then in place of click any place children call.

22

00:01:37,750  -->  00:01:39,660
So let's give this a test.

23

00:01:43,760  -->  00:01:47,210
And now we've got a much more reasonable by now on our buttons.

24

00:01:47,210  -->  00:01:48,230
Perfect.

25

00:01:48,230  -->  00:01:52,710
So again this is just a step to make sure that we've got a truly reusable component.

26

00:01:52,880  -->  00:01:56,460
Our button tag right now is 100 percent reusable.

27

00:01:56,510  -->  00:02:01,380
All over the place it is not tied to the implementation of the card section.

28

00:02:01,430  -->  00:02:06,890
And in fact there is absolutely no reference in here whatsoever to any type of album or you Arel or

29

00:02:06,890  -->  00:02:08,810
artist name or anything like that.

30

00:02:08,900  -->  00:02:13,300
So we can definitely make reuse of this in future applications as well.

31

00:02:13,810  -->  00:02:14,580
OK.

32

00:02:14,600  -->  00:02:18,190
So I think that's just about it for our first application.

33

00:02:18,200  -->  00:02:20,990
I got to tell you I'm really happy with how this thing looks.

34

00:02:20,990  -->  00:02:23,360
I think it looks really professional.

35

00:02:23,360  -->  00:02:28,960
So let's take a little minute in the next section to do a wrap up on all the topics that we spoke about