Original subtitles

So, let me introduce the solution to you.

What if we would use a dirty little trick?

Here in my components folder,

I'll add a new sub folder helpers.

I'll name it helpers because debt best describes

which kind of component I'm going to add.

I'm going to add a wrapper

component. I'll name the file wrapper JS.

And in there, I won't even import React

because I'm not going to write any JSX code in there.

Instead, I'll just create my wrapper component,

get props and have my function body,

and export this wrapper.

And now you might be wondering what I'm going to do here

if I'm not writing any JSX code.

Well, I'll just return props.children.

Remember the children prop holds all the content

you're passing between the opening and closing tag

off your custom component.

Now it is valid in a component to just return that content

which you got between the opening and closing text.

And now I can import my wrapper,

for example, here in add user,

I can import wrapper from helpers, wrapper.

And I can use it as a regular react component.

So I can go down there and replace my div,

which has no other meaning

than fulfilling this JSX requirement with my wrapper.

So I'm using my rapper component here

and just to make this really clear again,

this is basically an empty component.

Everything it does is that it returns props children.

But this is enough to fulfill this requirement JSX has.

If I save this my application still works just fine.

And it works just fine because an add user,

we have a wrapping element.

Sure, it's an element which won't render

anything to the dom, but the requirement

is not that there must be one root component

being rendered to the dom.

The requirement just is, that there must be one root element

that you return or that you store in a constant or variable.

And that's what we're doing here.

We have one root element the wrapper,

and what we pass into that wrapper,

may be adjacent, that is okay as I explained.

Now of course all that content is taken

and just returned here, but that's also okay

because in this return statement,

I technically still only returned one thing,

I return the value in props children.

And this can be tough to wrap your head around

but this is just a technical requirement of JavaScript

around which we're working here.

I just work around that requirement

by returning one thing here,

and one thing here.

And of course what we get here in props children

will be that adjacent content,

but that will not be a problem

because I never directly returned that in my code.

And this will therefore work just fine.

This will not cause any errors as you can clearly tell.

Now that's a nice little trick for solving this problem.

Because if we now have a look at the elements tab

and therefore at the dom, which is actually being rendered,

we see that if I inspect my add form component,

here's my form,

we see there is a div around it,

but that's just this card div.

But what we also see is if I click Add user,

that this modal div is being added.

But around that, we do have a wrapping div,

but this is actually the div coming from the app component

where I also have the wrapping div.

This is not coming from inside the add user component.

Instead from inside there,

nothing is being rendered into real dom.

We got the card and above that, nothing.

Because again, this div which is above it

is coming from the app component.

And that is of course pretty sweet.