All language subtitles for 022 Building Wrapper Components with props.children_en

Now, let's start with that card look.

In case, it's not clear what I mean,

I mean that look, which we all used earlier

for the first demo project,

where we simply have a nice white background

and a slight drop shadow.

And I'd like to have that for every meetup item.

Now, we can solve this by adding a couple of CSS classes

in the meetup item module CSS file,

and then changing the look of our list item

that would work.

But this card look is so common

that we may also want to use it

in our components of this application.

And we will actually use it in our components later.

That's why I want to create a separate reusable component,

which should act as a wrapper around our components,

and just give those components some styling,

which we then reuse.

And for this in the components folder,

I'll add a new sub folder, which I just want to name UI

for user interface. The name is up to you, of course.

In there,

I want to store some general user interface components,

which don't belong to a specific feature,

but instead are used in different places of the app.

And here, I'll add a card JS file

and attached you find a card module CSS file,

which you can simply add next to this card JS file.

And then the car JS file,

we'll now create a component as we did it before,

simple functional component and export it of course.

And we'll also import the styling,

import classes from "./card.module CSS."

And then in the component function, return a simple div,

where we set the class name to classes.card.

Now, the special thing about this component is,

that this should now be the first custom component,

which we can wrap around JSX content.

Because the goal is to use this card components

such that on a meetup item, inside of this list item,

we can use card.

And for this you need to add the import,

so import card from going up one level diving into UI card.

And we can wrap card around that JSX content

so that we can use the card component like this.

That's the goal.

But at the moment, if you save all files,

the result is that you don't see anything.

And the reason is that at the moment,

this card component simply swallows everything we wrap

and throws it away, you could say.

Because this card component just renders a div,

and it doesn't know what it should do

with any wrapped content.

Now, it's such a common case, though,

that you build components

that should wrap itself around more JSX content.

So you could say that you want to inject JSX content

into this component.

That react, of course has a solution for this case.

And this solution, again, is related to props.

We learned that we can pass props

by adding attributes to an element, and that does work.

But you can also add a special prop

by passing content between the opening and closing text.

And that content is then exposed under that special prop

inside of that wrapping component.

So here we accept the props parameter again.

And then between the div text,

I want to output props.children.

The children prop is a special prop,

which every component receives by default.

And children always holds the content,

which is passed between the opening

and closing component text.

So this JSX content,

that is the value stored in that children prop in this case,

when we use card in this component like this.

And now I'm just outputting the value stored in children

between these div text.

And with that if we reload,

we now have this slight card look

and we see a drop shadow here.

Since we take up too much width,

we don't see it perfectly, but we can see it a bit.

And if we inspect this in the div tools,

we see that every meetup item here

has this div with the card class.

The name was transformed because of that CSS modules feature

but it has that div with a card class

wrapped around these other divs image content

and actions inside of the list item.

So that wrapping works,

and that is another very important technique

when it comes to composing user interfaces

with react components

and that's why we also cover it here.

And we can now use this technique as well

for setting up a general layout for this application

because I'd like to have more white space

around the content here.

And for this, I'll go to the layout folder

and add a layout component in there.

Attached you also find a layout module CSS file,

which you can add next to this JavaScript file.

And then here in layout JS,

we can create a layout component function

and export it as a default.

And import classes here from "./layout.module.css,"

and then in here, return our layout.

And that could be a div with our main navigation, let's say.

So from app JS, I'll cut main navigation

and remove the imports there.

And instead, in the layout component, I'll add that here.

And therefore, of course,

also add an import of main navigation

from that main navigation JavaScript file,

which is next to the layout file.

And below that, we could use the regular main HTML element,

and then use the layout component such that we wrap it

around the actual JSX code that should be rendered.

So we could say that in app JS,

we want to wrap the content selected and rendered

by the router with our layout.

So here in app JS,

we can import layout from going up

diving into the components folder layout, layout.

And instead of having this useless wrapping div,

we could use our own layout component for wrapping here.

And now this content here, the actual route contents,

the page component that is being loaded,

should be rendered inside of this main block.

And we can again achieve this with props children.

We can again accept props here,

and then output props.children

here inside of the main element.

And that will then just forward that content,

which is between our layout text.

So this content here into that main element.

Now here, we should also add

a class name of classes.main for styling,

and with that, if we save this,

now we're utilizing this nice layout component

for wrapping all our content.

It's technically not required.

We could have added the styling in another way too

but it is another nice practice of this children concept,

and it removes some extra code from our app component

and make sure that this component can focus

on one main thing, rendering the routing configuration.

Because your components typically

should be focused on one thing.

And now we got a leaner app component,

and we're again using props children

to create this layout components here.