1 00:00:00,830 --> 00:00:04,600 All right my friends hopefully you had some success with this exercise in this video. 2 00:00:04,610 --> 00:00:06,590 We're going to go over the solution to it. 3 00:00:06,870 --> 00:00:11,180 It's all we really have to do here is try to make the message component a little bit more usable than 4 00:00:11,180 --> 00:00:12,920 it currently is at present. 5 00:00:12,920 --> 00:00:17,060 We've got that hard coded text in there which is not really going to be doing anything good for us if 6 00:00:17,060 --> 00:00:18,440 we ever want to change it. 7 00:00:18,680 --> 00:00:21,080 So the first thing I'm going to do is find out where we are. 8 00:00:21,110 --> 00:00:26,930 I create an instance of message up here inside the app and then I'm going to add in a new product to 9 00:00:26,930 --> 00:00:33,470 it called Hetter is headed right here is going to contain the text that I want to show inside of the 10 00:00:33,590 --> 00:00:34,830 header div. 11 00:00:35,150 --> 00:00:39,470 So at present it says something like changes in service just to make sure that I'm doing the correct 12 00:00:39,470 --> 00:00:39,980 update here. 13 00:00:39,980 --> 00:00:42,300 I'm going to provide a slightly different header. 14 00:00:42,350 --> 00:00:43,510 I'll say something like. 15 00:00:43,550 --> 00:00:48,330 Attention that works then down inside of the message. 16 00:00:48,450 --> 00:00:53,730 You'll notice that we've already listed out that first argument to the function of prop's so I'll delete 17 00:00:53,730 --> 00:00:59,480 the hard coded changes in service and replace it with the set of curly braces in an inside there. 18 00:00:59,490 --> 00:01:04,830 I'll say prop's header like so and I will see over here on the right hand side even though it's kind 19 00:01:04,830 --> 00:01:05,610 of cut off. 20 00:01:05,820 --> 00:01:09,270 My text is now updated to say attention perfect. 21 00:01:09,480 --> 00:01:12,560 So now we'll do the same thing with the body down here as well. 22 00:01:12,930 --> 00:01:17,670 I'm going to add on a new Propp of text to this thing and will give it some text or something like I 23 00:01:17,670 --> 00:01:18,000 don't know. 24 00:01:18,000 --> 00:01:20,850 How about we did an update that will work. 25 00:01:23,030 --> 00:01:28,510 So then inside the p tag down here I'm going to delete the hardcoded text or replace it with the set 26 00:01:28,510 --> 00:01:34,730 of curly braces and inside their all reference props text and they'll notice every year on the Reagan 27 00:01:34,780 --> 00:01:35,260 side. 28 00:01:35,320 --> 00:01:37,610 I get the got the update over there as well. 29 00:01:38,550 --> 00:01:41,930 As a quick reminder we didn't have to call these two props right here. 30 00:01:41,930 --> 00:01:43,000 Hetter and text. 31 00:01:43,070 --> 00:01:44,760 I just arbitrarily made those up. 32 00:01:44,780 --> 00:01:49,260 We could have just as well call this like message body or something like that. 33 00:01:49,340 --> 00:01:53,180 Totally could have been possible we just would have had to make sure that if we renamed the proper right 34 00:01:53,180 --> 00:01:57,310 there we would have have to rename it down here inside of that tag as well too. 35 00:01:57,440 --> 00:02:00,220 Message Body as we go. 36 00:02:00,480 --> 00:02:01,950 But Tex works just fine. 37 00:02:01,950 --> 00:02:02,940 It's good enough. 38 00:02:03,210 --> 00:02:04,530 OK so this looks pretty good. 39 00:02:04,590 --> 00:02:07,190 Not going to zoom out just a little bit and check my solution 40 00:02:11,010 --> 00:02:12,590 and it looks like we're good to go. 41 00:02:12,600 --> 00:02:13,340 All right so that's it. 42 00:02:13,350 --> 00:02:18,080 Let's take a quick pause right here and in the next video you're going to find another quick exercise. 43 00:02:18,120 --> 00:02:22,920 Not going to do a introduction on this next one because I think you get the general idea now so go ahead 44 00:02:22,950 --> 00:02:26,700 and give a shot on that exercise and we'll go over a solution right after that.