Let's continue diving deeper into React.
We get this form here, this input form
and it looks decent
but I'd like to open it as a modal overlay.
So some overlay that's above the rest
of the content on this page.
And in the end, achieving this look is a pure CSS thing.
Now, what we could do
is we could edit the styles of this NewPost component
such that it has this modal look.
You can add a backdrop behind the form,
so some background so that it looks like an overlay.
But I'd rather take a different route.
In the end, I wanna make sure
that in the place where I use this NewPost component,
and I just pressed the auto format shortcut here
to put these props into separate lines,
which is still valid code but easier to read.
But I'd like to take a route
where I have a new Modal component,
which doesn't exist yet,
which can be wrapped around NewPost
to give that NewPost that modal overlay look.
Again, this Modal component
is a component we have yet to add
but I'd like to have a component
that can be used like this.
Now, the idea behind that
is simply that on more complex websites,
chances are high that you have all kinds
of content that should have that overlay look,
not just this NewPost form
but maybe also some warning dialogs, anything like that.
So it would be nice to have such a wrapper,
and being able to wrap content with components of yours
is indeed another core React concept.
You can really only compose flexible,
powerful user interfaces
if you're able to also wrap components
with other components
to apply some extra styles to them, for example.
And therefore, to achieve this here,
I'll add a new component called Modal.
A Modal.jsx file is therefore added.
And attached, you find a link to a Modal.module.css file,
which you should add, which simply comes with some styles
that will help us achieve that overlay look.
And then inside of Modal.jsx,
we can create a Modal function
and export that as a default.
And then in there, I wanna return a fragment,
so this empty tag
where I have a div without any content inside.
And then a dialog element
that will hold the actual modal content
and this div will be used to render a background,
a backdrop as it's also often called for this modal.
Now, we should import some CSS classes here
from Modal.module.css.
And then assign one class here to this div,
and that would be the backdrop class.
And to the dialog, we should also add a class
and that's the modal class.
And backdrop and modal are both CSS classes defined
in this CSS file.
Now with that, we have a Modal component
but if we try to use it as a wrapper around NewPost,
so inside of PostsList,
if I go there and I then try to import this Modal component,
which we just added from ./Modal, like this,
and I then use it as a wrapper
with the opening and closing tag around NewPost,
you will see that it doesn't really look the way it should.
It looks the backdrop is visible.
We have this gray background,
this transparent black background everywhere
but the form and the modal is nowhere to be seen.
The reason for that is that if you wrap content,
no matter if it's a component
or some default built-in elements,
if you wrap content with another custom component,
by default, React does not know
where to put that wrapped content
inside the wrapping component.
So inside the Modal component in this case.
You have to tell React
where that wrapped content should go.
And you do tell React with another special prop.
So with the props object.
And that special prop is the children prop.
By the way, instead of always using props dot,
you can also use object destructuring here
to directly get access to a specific value.
So to a specific property of that props object.
This is not only possible
when using this special children prop
but it works with all props.
So for the Post component,
you could, for example, also use object destructuring
to get the author and the body,
and then save yourself the props dot call down there.
But that's just a side note.
So this is just a more concise way of getting access
to your props.
What's new and important here
is this special children prop.
Thus far, we always added our own props.
A post, for example, has our own author and body prop.
And these names were up to you.
Now, for children, it's different.
That's a reserved prop name
because children always refers to the content
that's passed between the opening
and closing tags of your custom component.
So here this content, the NewPost component in this case,
that's the value that will be received
on the children prop in this Modal component function.
And we then output it down there
so that we tall React that in the end here,
it should output the content
that's passed between the modal opening
and closing tags.
Now, with that change applied,
we just have to adjust the styling
of this NewPost component here a little bit.
And get rid of this box-shadow, border-radius and margin.
And also back in the Modal component,
add the special open prop on dialog just like that.
The value theoretically is true
but if you set true as a value for a prop,
you can also omit it and just add the prop name,
and then true will be used as a default value.
And this open prop is simply required
by the default dialog element to make sure it's visible.
And with all these steps taken,
you get that overlay with that form
and it's above the other content.
So that's great.
That's now the children prop in action,
helping us create a component
that can be used as a wrapper around another component.