1
00:00:00,920 --> 00:00:02,780
All right so do you have any success.

2
00:00:02,780 --> 00:00:03,730
Hopefully you did.

3
00:00:03,770 --> 00:00:08,810
Hopefully you were able to provide the comment text as a prop along with the image source up as well

4
00:00:09,440 --> 00:00:12,490
in the section or we'll walk through some solutions to this very quickly.

5
00:00:12,590 --> 00:00:16,700
We'll first begin with the commet techs down here because it's definitely a little bit easier of the

6
00:00:16,700 --> 00:00:17,990
two.

7
00:00:17,990 --> 00:00:22,940
Now in order to do this I'm going to first flip back over to my app component and I went to add a new

8
00:00:23,000 --> 00:00:24,700
property name to this thing.

9
00:00:24,800 --> 00:00:28,490
Remember you can use any property name within reason that you want to use.

10
00:00:28,490 --> 00:00:31,980
So chances are you used a different property name I.

11
00:00:32,270 --> 00:00:37,280
If you want to you can use your own property name or change it to whatever I'm using in my case.

12
00:00:37,310 --> 00:00:39,350
I'm going to say content.

13
00:00:39,380 --> 00:00:40,340
I'll give that as the name.

14
00:00:40,340 --> 00:00:44,780
So that's going to be essentially my comment content that's all trying to specify here.

15
00:00:44,840 --> 00:00:53,180
So now for the first comment detail I'll give it content of nice blog posts on the second one.

16
00:00:53,180 --> 00:00:54,190
All do.

17
00:00:54,370 --> 00:01:02,580
I liked the subject and on the third on does something like I like the writing like so now.

18
00:01:02,600 --> 00:01:07,270
Quick note when I save this file you're going to see my code formatter jump in and it's going to kind

19
00:01:07,270 --> 00:01:08,960
of reformat all this code.

20
00:01:09,040 --> 00:01:10,040
It's going to saver right now.

21
00:01:10,060 --> 00:01:11,680
And there we go.

22
00:01:11,680 --> 00:01:16,750
So any time that we start to amass a couple of different props and any individual GSX tag is getting

23
00:01:16,810 --> 00:01:24,130
really long we will very frequently turn that single tag into a multi-line tag like so it's still the

24
00:01:24,130 --> 00:01:25,980
exact same sequence of characters.

25
00:01:25,990 --> 00:01:29,340
The only difference is that we had added in a couple of new lines here.

26
00:01:29,560 --> 00:01:35,860
So we say Come and detail we then tab in one tab or two spaces depending on whether using tabs or spaces

27
00:01:35,860 --> 00:01:40,390
and actually using spaces in my case then we list out all the different props that we want to pass in

28
00:01:40,840 --> 00:01:45,940
and then we can close that component off with the forward slash greater than sign like so you're going

29
00:01:45,940 --> 00:01:48,550
to very frequently see this syntax right here.

30
00:01:48,550 --> 00:01:54,560
Any time that we are trying to pass many different props down to a single component.

31
00:01:54,580 --> 00:01:54,830
All right.

32
00:01:54,850 --> 00:01:59,330
Now that we've provided the content we can now flip back over to the comment detail.

33
00:01:59,350 --> 00:02:05,110
Remember this Propp subject should now contain a key of content that we can freely reference anywhere

34
00:02:05,110 --> 00:02:06,580
inside this component.

35
00:02:06,910 --> 00:02:11,940
So I got to go down to our blog content down here where it currently says Nice blog post.

36
00:02:12,310 --> 00:02:14,240
I'll delete that hardcoded text.

37
00:02:14,670 --> 00:02:18,790
I'll put in my set of curly braces and then Propp start content like so.

38
00:02:20,700 --> 00:02:25,010
I'll save the file and we'll flip back over to our browser and see how it's going.

39
00:02:25,120 --> 00:02:26,440
All right so I see nice blog post.

40
00:02:26,440 --> 00:02:29,490
I like the subject and I like the writing perfect.

41
00:02:29,560 --> 00:02:33,020
It's now just one more thing I want to try to extract this image.

42
00:02:33,040 --> 00:02:34,550
You are ill as well.

43
00:02:34,700 --> 00:02:40,360
Now at present that image is being randomly generated so it doesn't make a huge difference whether or

44
00:02:40,360 --> 00:02:44,130
not this is being provided by the parent or just randomly generated inside the child.

45
00:02:44,230 --> 00:02:48,780
But nonetheless I just want some practice on how we would go to this process at this point.

46
00:02:48,780 --> 00:02:54,230
We've only gone through props that show some content or some information or text inside the child.

47
00:02:54,400 --> 00:03:00,160
But this is going to be an example of where we want to customize the attributes on a GSX element using

48
00:03:00,190 --> 00:03:03,540
a prop so it will be old slightly different approach.

49
00:03:03,610 --> 00:03:07,620
But in practice the syntax will be just about identical.

50
00:03:07,640 --> 00:03:13,890
All right so I will first begin by changing back or to the index such as file on each of my common details.

51
00:03:13,890 --> 00:03:16,860
I'm going to put in a new Propp name and I'll call this one.

52
00:03:16,860 --> 00:03:19,910
How about Avatar.

53
00:03:19,920 --> 00:03:20,890
I think that's good enough.

54
00:03:20,880 --> 00:03:22,130
We'll see it like that.

55
00:03:22,500 --> 00:03:28,050
Now in this case I did not have a hard coded string to provide for the image Avatar remember.

56
00:03:28,050 --> 00:03:29,460
The string is going to be some.

57
00:03:29,500 --> 00:03:33,150
Your L that tells the browser where to get this image from.

58
00:03:33,150 --> 00:03:36,010
So in this case my prop is not going to be a string.

59
00:03:36,150 --> 00:03:43,150
Instead it's going to be a reference to a javascript variable because I want to call that faker image.

60
00:03:43,190 --> 00:03:48,520
David tarriff function from right here sole reference with the curly braces.

61
00:03:48,730 --> 00:03:53,510
And notice we still have Baker imported into the index such as file.

62
00:03:53,510 --> 00:03:58,790
So right here we can say faker does image dot Avatar like so.

63
00:03:58,880 --> 00:04:04,370
So this is going to generate a new link or a link to an image and then assign it to the Avatar Propp

64
00:04:04,520 --> 00:04:07,680
that's going to be passed down to the comment detail.

65
00:04:07,770 --> 00:04:11,580
So now we can repeat that same process with the other two components as well.

66
00:04:11,650 --> 00:04:18,160
I'll say Avatar equals faker image Avatar and the same thing down here.

67
00:04:18,160 --> 00:04:20,730
Avatar equals faker image.

68
00:04:20,830 --> 00:04:23,800
Avatar.

69
00:04:23,940 --> 00:04:27,380
All right so now we'll flip back over to the comment detail.

70
00:04:27,490 --> 00:04:31,120
So now we have a new property on that prop subject.

71
00:04:31,120 --> 00:04:35,100
We have a new key value pair where the key is Avatar.

72
00:04:35,140 --> 00:04:40,170
Now I want to reference that props start Avatar and pass it to this SIRC.

73
00:04:40,570 --> 00:04:45,910
So in order to do so I'm going to delete the current function call in there and again we are referencing

74
00:04:45,940 --> 00:04:51,020
a javascript variable and because of that we're going to continue to use these curly braces.

75
00:04:51,040 --> 00:04:57,230
We are not going to put it inside of a string because we are not hard coding the source inside of curly

76
00:04:57,230 --> 00:04:57,730
braces.

77
00:04:57,740 --> 00:05:02,520
I'll say Propst dot Avatar like so and that's it.

78
00:05:03,670 --> 00:05:06,810
OK so I'm going to save this file and I'll flip back over.

79
00:05:07,100 --> 00:05:11,330
And in this case our images are still going to show up just fine and we're really just making sure that

80
00:05:11,330 --> 00:05:13,330
they continue to be randomly generated.

81
00:05:15,090 --> 00:05:16,110
Awesome.

82
00:05:16,140 --> 00:05:19,100
Now if you have your counsel open you might notice so we have a little warning.

83
00:05:19,110 --> 00:05:21,680
Over here it says faker is defined but not used.

84
00:05:21,840 --> 00:05:24,910
So that's a little warning that's being thrown by Create react up.

85
00:05:24,950 --> 00:05:30,330
It's essentially complaining that inside of our comment detailed out JSE file we imported the faker

86
00:05:30,330 --> 00:05:33,880
library but we never actually made use of it inside the file.

87
00:05:33,900 --> 00:05:39,210
So if we wanted that warning message to go away we could just find inside of commet detail in Fort F.A.

88
00:05:39,600 --> 00:05:45,900
and delete it like so we would still want to leave the import statement inside the index such as file

89
00:05:45,900 --> 00:05:50,620
however because we are using the F.A. library inside this file for all these different avatars that

90
00:05:50,650 --> 00:05:52,350
we're putting together.

91
00:05:52,350 --> 00:05:56,320
So now if you go back over you'll notice that that warning message has now gone away.

92
00:05:56,400 --> 00:05:56,720
All right.

93
00:05:56,760 --> 00:05:57,480
That's pretty much it.

94
00:05:57,480 --> 00:06:03,300
That is prop's in a nutshell that's how we pass basic information from a parent down to a child.

95
00:06:03,630 --> 00:06:06,620
Let's take a quick pause right here and continue in the next video.