1 00:00:00,620 --> 00:00:03,950 In the last section we started talking about the props system in react. 2 00:00:03,960 --> 00:00:07,810 Remember this is all about passing data from a parent to a child. 3 00:00:07,850 --> 00:00:13,060 A child cannot pass data backup to the parent through the system directly. 4 00:00:13,100 --> 00:00:14,620 We can kind of do it indirectly. 5 00:00:14,630 --> 00:00:16,200 We'll see examples of that later on. 6 00:00:16,310 --> 00:00:20,450 But the system is generally about communicating information from a parent to a child. 7 00:00:20,450 --> 00:00:25,070 Now one other quick thing that I neglected to mention in the last section is that prop's is short for 8 00:00:25,070 --> 00:00:28,330 properties just a little bit of trivia. 9 00:00:28,340 --> 00:00:29,800 All right so how are we going to do this. 10 00:00:29,870 --> 00:00:32,990 Well when we use the prop system there's kind of two stages. 11 00:00:33,110 --> 00:00:38,030 There's the first stage in which we want to provide information from the parent to the child and the 12 00:00:38,030 --> 00:00:42,410 second stage in which the child consumes or makes use of that information. 13 00:00:42,620 --> 00:00:48,020 So let's first focus on how we provide information from the parent to the child going to look a little 14 00:00:48,020 --> 00:00:49,390 bit like this right here. 15 00:00:49,730 --> 00:00:54,730 So we are going to find in the parent component where we show an instance of the common detail. 16 00:00:54,920 --> 00:01:01,980 Remember we do that right here inside the component right now to provide some information down to that 17 00:01:01,980 --> 00:01:03,050 comment detail. 18 00:01:03,090 --> 00:01:08,460 We're going to write out what looks like just about any other property or attribute that we've been 19 00:01:08,460 --> 00:01:10,890 providing to GSX already. 20 00:01:10,890 --> 00:01:16,170 We're going to say the property name equals and then the value for that property. 21 00:01:16,440 --> 00:01:20,880 This information is then going to show up inside the come in detail. 22 00:01:21,000 --> 00:01:25,560 Now that syntax right there looks very similar to a lot of the syntax we've already been making use 23 00:01:25,560 --> 00:01:30,990 of inside of GSX for example a class name equals comments sure f equals forward slash. 24 00:01:30,990 --> 00:01:32,450 All equals Avatar. 25 00:01:32,640 --> 00:01:38,180 So the syntax here for providing a prompt to a child very similar to what you're already used to. 26 00:01:39,230 --> 00:01:43,160 The other thing I want to mention about this property that we're providing right now is the name that 27 00:01:43,160 --> 00:01:45,650 I chose right there I said author equals. 28 00:01:45,650 --> 00:01:48,380 There's nothing special about me using the name author. 29 00:01:48,380 --> 00:01:53,570 It's totally up to you on how you want to name this property that you're passing from the parent down 30 00:01:53,570 --> 00:01:54,510 to the child. 31 00:01:54,530 --> 00:02:02,430 We could have just as easily called it name or name of author or we could have called it person who 32 00:02:02,760 --> 00:02:04,040 wrote this. 33 00:02:04,230 --> 00:02:05,460 Or whenever you want it to be. 34 00:02:05,460 --> 00:02:11,870 But in general we try to make it at least make some amount of sense in the context of making a comment. 35 00:02:11,880 --> 00:02:14,530 It definitely makes sense to have a proper named author. 36 00:02:14,550 --> 00:02:18,010 Because this is the author of the person who made this comment. 37 00:02:18,120 --> 00:02:21,590 But again you can change that thing to be whatever value you want it to be. 38 00:02:22,370 --> 00:02:27,420 No notice in this case the prop that I provided is a hard coded string that says Sam if we wanted to 39 00:02:27,450 --> 00:02:32,250 we could just as easily place those curly braces and then reference them javascript variable inside 40 00:02:32,250 --> 00:02:32,760 of here. 41 00:02:32,970 --> 00:02:37,800 So maybe we have some javascript variable inside of our component called author we can reference it 42 00:02:37,800 --> 00:02:45,150 like so but this first take is going to hard code some value not Sam but Sam it is going to hard code 43 00:02:45,150 --> 00:02:46,990 the value for this first go through. 44 00:02:47,250 --> 00:02:49,270 OK so let's flip back over to our app component. 45 00:02:49,380 --> 00:02:54,100 We're going to try to add on this first prop of author. 46 00:02:54,100 --> 00:02:59,830 All right so back every year I'm going to find my comment detail and I'm going to add in a prop of author 47 00:03:00,010 --> 00:03:01,520 and I'll set it equal to Sam. 48 00:03:01,540 --> 00:03:02,730 Now I keep on putting same. 49 00:03:02,740 --> 00:03:06,500 There we go and I'll do the same thing on the next one. 50 00:03:06,760 --> 00:03:14,250 So this one over here let's do Alex and I'll put on an author of Jane for the third one. 51 00:03:14,320 --> 00:03:18,040 And I think we'll just stick with two three comments excuse me for right now is going to delete these 52 00:03:18,040 --> 00:03:19,050 last two down here. 53 00:03:19,960 --> 00:03:21,400 Now take notice of what we're doing here. 54 00:03:21,400 --> 00:03:27,830 We are providing the same property name to each these details but each then has a different value. 55 00:03:28,060 --> 00:03:34,000 So what this tells us is that when we provide a prompt to a component it's always going to a unique 56 00:03:34,000 --> 00:03:35,590 version of that component. 57 00:03:35,770 --> 00:03:41,290 And this prop. 8 year of author equal Sam is not going to be somehow shared with this second component 58 00:03:41,320 --> 00:03:42,220 or the third component. 59 00:03:42,220 --> 00:03:48,680 Over here this prop is unique in only being passed to this one very particular instance of the common 60 00:03:48,730 --> 00:03:50,530 detail. 61 00:03:50,530 --> 00:03:55,930 All right so now that we provided some detail or some information to a child we have to open up that 62 00:03:55,930 --> 00:04:01,120 child's component like the actual source code for it and make sure that we consume this information. 63 00:04:01,120 --> 00:04:02,830 Remember it's a two step process. 64 00:04:02,860 --> 00:04:05,860 On the one hand we provide information on the other side. 65 00:04:05,890 --> 00:04:14,430 We consume the information so over inside of content detail we need to somehow get access to that prop 66 00:04:14,430 --> 00:04:20,760 that we have provided to this component that prop is going to show up inside of an object that is provided 67 00:04:20,790 --> 00:04:23,370 as the first argument to this function. 68 00:04:23,610 --> 00:04:27,440 So to this point we've not been referring to any arguments up here for this function. 69 00:04:27,510 --> 00:04:30,720 But in fact it's always going to fight it with one argument. 70 00:04:30,720 --> 00:04:38,010 The first argument which by convention we refer to as props right now let's just console log that prop's 71 00:04:38,010 --> 00:04:41,450 argument and see what happens when we refresh our page. 72 00:04:41,850 --> 00:04:43,500 So I'm gonna put that console log in there. 73 00:04:43,530 --> 00:04:47,920 I'm going to save this file and I'll flip back over to my browser. 74 00:04:47,970 --> 00:04:53,740 Now I'm going to also open up my chrome inspector so I can see that consul lock. 75 00:04:53,950 --> 00:04:57,340 And here's my counsel and there's the three console logs. 76 00:04:57,460 --> 00:05:01,540 So I've got object one object to an object three. 77 00:05:01,660 --> 00:05:06,100 Each of these objects you see right here are from the three instances of combat detail that we have 78 00:05:06,100 --> 00:05:07,220 now created. 79 00:05:07,240 --> 00:05:10,630 You'll notice that that props object has a key value pair inside of it. 80 00:05:10,630 --> 00:05:17,410 Now the key is author or in other words the name of the prop that we provided inside the app and the 81 00:05:17,410 --> 00:05:22,770 value is the individual name that we provided to each of those common details. 82 00:05:23,580 --> 00:05:31,420 So now to consume this prop in our comment detail we can find where we are currently making use of the 83 00:05:31,420 --> 00:05:36,590 name or have the hardcoded name of Sam which is in this anchor tag right here. 84 00:05:36,630 --> 00:05:38,490 I go in to remove Sam. 85 00:05:38,550 --> 00:05:42,460 Put in my curly braces to indicate them about to reference a javascript variable. 86 00:05:42,660 --> 00:05:48,310 And then inside there are reference props dot author like so. 87 00:05:48,490 --> 00:05:53,920 So now whenever this comment detail is shown on the screen the common detail is going to look at that 88 00:05:53,920 --> 00:05:55,220 prop's object. 89 00:05:55,270 --> 00:05:59,830 It's going to see that there is an author property in there that's going to take that author's name 90 00:05:59,920 --> 00:06:01,930 and stick it into this anchor tag. 91 00:06:02,810 --> 00:06:05,370 So let's flip back over to our browser after saving this file. 92 00:06:05,390 --> 00:06:10,490 Now that we were referring to the Propst author and back over here we'll see that our names have been 93 00:06:10,520 --> 00:06:16,340 updated for each of the comments to Sam Alex and Jane which perfectly match up to the different property 94 00:06:16,340 --> 00:06:18,760 values that we provided to those components. 95 00:06:19,040 --> 00:06:19,990 All right so that's pretty much it. 96 00:06:20,000 --> 00:06:22,160 That's the entire prop's system. 97 00:06:22,160 --> 00:06:28,310 In a nutshell all we have to do is provide some information from the parent to the child by adding an 98 00:06:28,310 --> 00:06:34,060 attribute like this right here and then in the child we will reference that prop's argument. 99 00:06:34,160 --> 00:06:38,090 That is an object that contains the information that we provided from the parent. 100 00:06:38,360 --> 00:06:42,610 And then we will refer to that Propp inside of our GSX. 101 00:06:42,770 --> 00:06:48,530 That's all we got to do it's going to be the exact same series of steps over and over and over again. 102 00:06:48,530 --> 00:06:51,140 All right so let's remove that council log. 103 00:06:51,140 --> 00:06:52,600 I don't think we need that anymore. 104 00:06:53,910 --> 00:06:56,950 And then we'll take a quick pause right here when we come back in the next section. 105 00:06:57,000 --> 00:07:03,030 We're going to also attempt to customize our time and our blog content through this system as well. 106 00:07:03,040 --> 00:07:05,190 So a quick break and I'll see you in just a minute.