All right so do you have any success.
Hopefully you did.
Hopefully you were able to provide the comment text as a prop along with the image source up as well
in the section or we'll walk through some solutions to this very quickly.
We'll first begin with the commet techs down here because it's definitely a little bit easier of the
two.
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
property name to this thing.
Remember you can use any property name within reason that you want to use.
So chances are you used a different property name I.
If you want to you can use your own property name or change it to whatever I'm using in my case.
I'm going to say content.
I'll give that as the name.
So that's going to be essentially my comment content that's all trying to specify here.
So now for the first comment detail I'll give it content of nice blog posts on the second one.
All do.
I liked the subject and on the third on does something like I like the writing like so now.
Quick note when I save this file you're going to see my code formatter jump in and it's going to kind
of reformat all this code.
It's going to saver right now.
And there we go.
So any time that we start to amass a couple of different props and any individual GSX tag is getting
really long we will very frequently turn that single tag into a multi-line tag like so it's still the
exact same sequence of characters.
The only difference is that we had added in a couple of new lines here.
So we say Come and detail we then tab in one tab or two spaces depending on whether using tabs or spaces
and actually using spaces in my case then we list out all the different props that we want to pass in
and then we can close that component off with the forward slash greater than sign like so you're going
to very frequently see this syntax right here.
Any time that we are trying to pass many different props down to a single component.
All right.
Now that we've provided the content we can now flip back over to the comment detail.
Remember this Propp subject should now contain a key of content that we can freely reference anywhere
inside this component.
So I got to go down to our blog content down here where it currently says Nice blog post.
I'll delete that hardcoded text.
I'll put in my set of curly braces and then Propp start content like so.
I'll save the file and we'll flip back over to our browser and see how it's going.
All right so I see nice blog post.
I like the subject and I like the writing perfect.
It's now just one more thing I want to try to extract this image.
You are ill as well.
Now at present that image is being randomly generated so it doesn't make a huge difference whether or
not this is being provided by the parent or just randomly generated inside the child.
But nonetheless I just want some practice on how we would go to this process at this point.
We've only gone through props that show some content or some information or text inside the child.
But this is going to be an example of where we want to customize the attributes on a GSX element using
a prop so it will be old slightly different approach.
But in practice the syntax will be just about identical.
All right so I will first begin by changing back or to the index such as file on each of my common details.
I'm going to put in a new Propp name and I'll call this one.
How about Avatar.
I think that's good enough.
We'll see it like that.
Now in this case I did not have a hard coded string to provide for the image Avatar remember.
The string is going to be some.
Your L that tells the browser where to get this image from.
So in this case my prop is not going to be a string.
Instead it's going to be a reference to a javascript variable because I want to call that faker image.
David tarriff function from right here sole reference with the curly braces.
And notice we still have Baker imported into the index such as file.
So right here we can say faker does image dot Avatar like so.
So this is going to generate a new link or a link to an image and then assign it to the Avatar Propp
that's going to be passed down to the comment detail.
So now we can repeat that same process with the other two components as well.
I'll say Avatar equals faker image Avatar and the same thing down here.
Avatar equals faker image.
Avatar.
All right so now we'll flip back over to the comment detail.
So now we have a new property on that prop subject.
We have a new key value pair where the key is Avatar.
Now I want to reference that props start Avatar and pass it to this SIRC.
So in order to do so I'm going to delete the current function call in there and again we are referencing
a javascript variable and because of that we're going to continue to use these curly braces.
We are not going to put it inside of a string because we are not hard coding the source inside of curly
braces.
I'll say Propst dot Avatar like so and that's it.
OK so I'm going to save this file and I'll flip back over.
And in this case our images are still going to show up just fine and we're really just making sure that
they continue to be randomly generated.
Awesome.
Now if you have your counsel open you might notice so we have a little warning.
Over here it says faker is defined but not used.
So that's a little warning that's being thrown by Create react up.
It's essentially complaining that inside of our comment detailed out JSE file we imported the faker
library but we never actually made use of it inside the file.
So if we wanted that warning message to go away we could just find inside of commet detail in Fort F.A.
and delete it like so we would still want to leave the import statement inside the index such as file
however because we are using the F.A. library inside this file for all these different avatars that
we're putting together.
So now if you go back over you'll notice that that warning message has now gone away.
All right.
That's pretty much it.
That is prop's in a nutshell that's how we pass basic information from a parent down to a child.
Let's take a quick pause right here and continue in the next video.