And while we're still on the topic of props, I also would like to talk about the special prop called
Children.
So this is going to be the case where please don't name this mama.
OK, this is not the case where, as usual, I said, yeah, you can name it whatever you'd want.
Shake and bake, Uncle Bobby or whatever.
In this case, the name has to match.
Exactly.
Now, what am I talking about?
You see, the children Propp is everything that we render in between the opening and closing time of
the component.
So for example, for the first or second book, you can pick whichever you like.
I would like to add the description, but again, the Gotcher over here is that only one of them will
have that description, not all of them, because if we want all of them, of course, we just need
to add that property in the object that I'm looking for, the prop, I set the value and I'm good to
go now.
This is going to be the case where only one of them will have that description.
So I'm going to go with the first one.
But as always, you can pick whichever you would like.
So, of course, first I would need to change this around where I'm not going to be self-closing because
children will be here.
In between my tax and I'm just going to go with a paragraph and I'm going to use a law, I'm so in visual
studio code, you just need to type Lorem on how many words you would like.
So case, I'm going to go with 20 now, the moment I run it.
Notice how nothing changes.
I don't see any difference, so the paragraph is only for the first one, but there's no difference
on what is to show how I can access whatever I place in between.
And keep in mind, again, you can place here the whole project doesn't matter.
In my case, I just placed one paragraph with 20 words.
But you can place your buttons, you can place your forms, whatever you like, placed you in between
the opening and closing tax.
Now, the better question right now is how can I access this?
And the thing is, I already structured the props object where I said that I'm looking for the prop
and the author prop.
Now, the children prop ears on the props object.
I can tell you right away that it is there.
So what I could do is just write comma and then children not don't worry, I will refactor a little
bit later.
So essentially that way you can definitely see it.
But for now, just look for children.
And the name again here is important.
And what you'll notice that since again we can access JavaScript, can just place children wherever
I would like.
So once I run it right now, of course everything is displayed correct because this is my paragraph.
Now, as far as where you would want to render, it's really up to you where if I move this up, notice
now, of course, it's going to be above the other.
If I move this above the title and of course it's going to be above the title again, the name is very
special.
It is children.
And in this case, I'd the structured right here in function parameters.
And then of course, you also accept so we use the carburettors would go back to JavaScript and then
we access the same name.
And then wherever I'm going to place this in a component, it will be rendered, meaning we'll place
it in between the opening and closing time and then where we set up the component, we can render it
anywhere, anywhere we would want.
Now, in my case, of course, I'm going to do this in the bottom.
So now let me rewrite where I'm not going to structure everything and function parameters.
Essentially, I will go back to props.
So I'm going to go back here to the props.
I will come on the set.
So I'm still accessing these values.
And of course, now I would need to go with props and the children.
Now, the reason why I refactored a little bit, because I clearly want to show you that, of course,
the props will be there.
So if we go back.
And if we inspect, take a look at the council notice again, I have to object, so my object, however,
for a second one, it has this children.
That's why I said the name is special or I'm sorry for the first one.
For the first one, we have children.
And the second one doesn't have that.
So, of course, that's why the second one doesn't display the children and the first one does not see
a specific thing.
For example, if you don't like this siestas grid, meaning that both cards right now are extended,
you can simply go back to indexers.
There where you're setting up the grade, you can say a line items and we can just say start on what
you'll notice right now that only the one that has the children, meaning the paragraph that I want,
is extended.
So that's up to you.
If you like this type of serious matter where each card has its own height, you can keep it if you
don't mind.
Of course, don't add it.
So, for example, if I come in the south and of course, notice how both of them are extended now,
I will add a little bit of this.
I swear I'm going to say book and then we'll just say margin top and we're going to go with I don't
know.
Point five or something like that, not much in there, and of course, we know how we can work with
a children problem and react where a gun is going to be content in between the opening and closing.
Tag them.
The name is special.
We need to go with children.
So either you the structure here, function parameters or you still keep the name and then you the structure,
rest of the properties.
By the way, please keep in mind and still do it here as well, Marcey children.
And then of course when I access, I also need to access children.
I can also do it this way as well.