1 00:00:00,700 --> 00:00:03,890 In the last section we learn more about the props system in react. 2 00:00:03,920 --> 00:00:08,200 We learn the syntax around passing a prop from a parent down to a child. 3 00:00:08,200 --> 00:00:14,280 We say the property name equals and then the value that we want to pass down then inside that target 4 00:00:14,280 --> 00:00:17,080 components are the component that we are showing as a child. 5 00:00:17,100 --> 00:00:22,050 We're going to receive that property data inside this first argument that we usually refer to as the 6 00:00:22,050 --> 00:00:23,690 prop's object. 7 00:00:23,700 --> 00:00:28,420 This is a javascript object that contains all the information that was passed from the parent. 8 00:00:28,620 --> 00:00:33,060 So we can then make use of that information inside of the child component. 9 00:00:33,060 --> 00:00:37,920 Now in this video we're going to go through that exact same series of steps to update our time right 10 00:00:37,920 --> 00:00:43,290 here and the blog content and make sure that those can be customized from the parent as well. 11 00:00:43,290 --> 00:00:46,490 Understanding the prop system is absolutely key and react. 12 00:00:46,500 --> 00:00:50,800 That's why we're going to go through this thing again even though it might seem a little bit too tedious. 13 00:00:51,060 --> 00:00:51,250 OK. 14 00:00:51,270 --> 00:00:54,600 So let's now focus on doing our date right here. 15 00:00:54,840 --> 00:01:01,540 So I want to make sure that I provide the date as a configuration option or a prop from the parent component. 16 00:01:01,560 --> 00:01:05,580 So in order to do so I can go back over to my component. 17 00:01:05,580 --> 00:01:10,860 I'm going to add in a new crop to each of these different commet details. 18 00:01:10,860 --> 00:01:14,100 I'm going to give these a name of how about time a go. 19 00:01:14,100 --> 00:01:21,840 I think that's reasonable and I'll provide a simple string that says something like today at or I don't 20 00:01:21,840 --> 00:01:33,170 know 50 45 pm and I'll do the same thing for the next one I'll say time ago equals today at 2 a.m.. 21 00:01:34,400 --> 00:01:37,740 And then maybe the third one I'll do time to go equals yesterday. 22 00:01:39,960 --> 00:01:48,930 At 5 am like so it's the exact same way we now have a new property name of time ago and a value for 23 00:01:48,990 --> 00:01:50,660 each of those different properties. 24 00:01:50,910 --> 00:01:56,910 So now over inside of our common detail is prop's object right here is going to contain two key value 25 00:01:56,910 --> 00:01:57,730 pairs. 26 00:01:57,750 --> 00:02:05,010 It's going to have both Propst author and prop's start time ago so I can find where I'm currently renting 27 00:02:05,010 --> 00:02:10,440 out the date inside that span or delete that and I will replace it with the set of curly braces because 28 00:02:10,440 --> 00:02:16,340 again I want to reference a javascript variable and then inside of here I'll say Propp start time ago. 29 00:02:16,560 --> 00:02:25,720 Lexa so I can save this a flip back over and I see my new updated times of 4:45 2:00 a.m. and 5:00 p.m. 30 00:02:25,780 --> 00:02:26,920 yesterday. 31 00:02:26,920 --> 00:02:27,150 All right. 32 00:02:27,160 --> 00:02:28,130 Not bad. 33 00:02:28,570 --> 00:02:33,370 So now at this point I want you to get a little work or a little practice on using this prop system 34 00:02:33,430 --> 00:02:34,220 on your own. 35 00:02:34,450 --> 00:02:40,690 So between this video and the next one I want you to take a shot at providing the comment techs down 36 00:02:40,700 --> 00:02:47,110 here as a prop and also I would really like it if you try to provide the image avatar right here as 37 00:02:47,110 --> 00:02:48,910 a prop as well. 38 00:02:48,910 --> 00:02:50,140 So go ahead give it a shot. 39 00:02:50,140 --> 00:02:56,610 Your goal is to pass the comment text from the parent and the image source from the parent as well. 40 00:02:56,650 --> 00:02:57,690 Go ahead and give it a shot. 41 00:02:57,760 --> 00:03:02,410 Remember if you run into any trouble whatsoever we're going to go over the solutions in the next video 42 00:03:02,410 --> 00:03:05,510 so you'll be able to see how to do this in very simple terms. 43 00:03:05,660 --> 00:03:07,020 So let's take a quick pause right here. 44 00:03:07,060 --> 00:03:09,940 We come back the next section or we'll see some solutions.