In the last section we extracted a ton of GSX from our index file into this new comment detail file.
Now we have one tiny little mistake inside this file right now something we missed in the last video.
You'll notice that inside this file we're making use of the F.A. library if we want to make use of the
Fakhry library inside this file.
We have to import it into this file.
At present we have only imported it into the index such as file every import statement that we put is
only going to be good for the file that it is placed in.
So this import statement inside of indexed not just is not going to make hacker available inside of
our comment detail.
So to fix this I'm going to put import Achor from Achor inside of come and detail like the OK.
So we've now created a new component.
So now the next thing that we're going to want to do is somehow get this component right here to show
up inside of our app.
We want to essentially render is the term we might use we want to render the comment detail component
inside of our app.
So how are we going to do that.
Well first off we need to make sure that the comment detail component is available inside of the index
such as file remember by default all these different variables components everything that we create
in different files are segmented or siloed off from other files inside of our project.
So right now there is absolutely no connection between our indexed file and the commit detail file.
They're not connected in any way in order to get this comment detail component to show up inside of
it next to us so that we can then use it inside of our app component.
We're going to do two things.
First off we're going to place an export statement inside of the commet detail this export statement
inside of here essentially tells the rest of the world hey everybody else every other file inside my
project.
If you want to get access to the comment detail no problem.
I got you covered.
So the expert statement that we're going to place inside of come a detail is going to make our component
available to every other file inside of our project then to actually get access to that.
We're going to add an import statement to the index file and that's what's going to form an actual link
between these two files and make sure that requirement comment detail is available inside the index
such as file.
So you can kind of imagine that we're going to hook these two things up like so once we get that component
inside of our index as file we can then render it or show it inside of our app.
Through that technique that we refer to as component nesting.
All right.
So let's get to it.
I'm going to first start off and of my comment detail file to export this component that we just created.
I'm going to go down to the very bottom of the file and I'll add export default comment detail like
so.
So again this line right here is what makes this component available to the rest of our project.
We'll talk more about this specific syntax we're using here in a little bit.
But right now we just need to understand it makes this thing available to outside files.
All right so now we're going to change over to the indexed geas file and at the top we're going to add
in an import statement for our comment detail.
So I'm going to say import comment detail from.
And then we're going to provide a relative path reference to the file that we are trying to import in
this case the file that we're trying to import is in the same directory or the same folder.
So to indicate that we'll put down a dot slash and the will list out the file name which is comment
detail like so.
So again the dot slash right there means.
Look in the same folder that we're currently in and then attempt to find the common detail file.
Now you'll notice that we did not have to put on a dot J.S. or anything like that.
Pack the library that is doing this kind of importing stuff and tying all these different files together
is going to automatically attempt to find files ending in G-S for you.
So you don't have to put the actual file extension on there so long as it's a J.S. file that you're
trying to import.
OK so it looks good.
Now last thing we have to do is take this component right here that we just imported and use it inside
of our app to do so.
I'm going to clean out the existing GSX that is inside of here right now.
I'm going to leave the outside div with the class name of UI container comments.
But those two duplicate comments so we put inside if you're going to delete those because we're going
to eventually completely replace them.
So I'm going to highlight everything from div class name Calment all the way down to the second to last
div right here.
And then I'll delete it like so.
So now we're just left with one div with that class name.
And we've got the closing div over there as well.
So now the lesson we need to do is tell our app component that it should show the common detail component
to do so.
I'm going to treat the comment detail as though it were a GSX tag.
So inside of you you're going to put comments detail like so now you might have thought that to show
that component you might have been thinking that we would use those curly braces and say something like
comment detail or remember we just spoke about GSX and we had said that if we want to refer to javascript
variables we're going to use those curly braces like so components are the one exception to that rule
if we want to show one component inside of another we're going to treat it as though it were a GSX tag
instead.
So whenever we're showing a component no knock and use those curly braces.
All right so that's pretty much it.
So let's now save this file and we'll flip over to the browser and we'll test this out.
At this point we're just going to expect to see exactly one comment on the screen.
And as we said previously that comment is currently going to have a fixed author name time and Palmet
content right there as well.
OK.
So I can flip back over and there we go.
So I see Sam I got my logo and I see a nice blog post.
Of course I could zoom in and see all of that more closely.
OK.
That's pretty much it.
That is how we show one component inside of another.
Now there's no limit to the number of components that we show inside of another.
If we wanted to we could copy this detail here a couple of times down like so and then save the file
again.
Look back over to the browser and now we'll see that we have an equal number of new content components
showing up on the screen.
All right.
So this looks good.
So now the only issue here is that we have this very repetitive author name time and blog content as
well.
So let's take a quick pause right here.
When we come back the next section we're going to talk about how we use that prop system that I'd mentioned
in the last video to configure these comment details when they are created.
So quick pause and I'll see you in just a minute.