Original subtitles

So with that custom wrapper component,

we could use a little trick to fulfill this requirement

and not end up with div soup.

Now, because it's so convenient

and also so obvious in the end, at least once you saw it,

this wrapper component

is actually not a component we need to build on our own.

Instead it comes with React.

There, it's the fragment component

which you can access on React.Fragment,

or you just import Fragment from React.

I will show you how to use it in a second.

Or in some projects,

you can also use the shortcut on the right,

but this depends on your project set up

because your build workflow needs to support this.

The left syntax will always work.

And that's the same as our wrapper.

These two syntaxes here render empty wrappers,

which don't render any actual HTML element to the DOM.

It's just built into React,

but I showed you our custom wrapper

so that you understand what these built in wrappers do.

So if you want to use to built in wrappers,

let's say in the app component,

where I said that we also had the problem,

we can remove the div and just use these empty tags.

Now that's not valid HTML,

and it's also not necessarily valid JSX in all projects.

Your project set up needs to support it.

Now this project set up does support it,

and if you downloaded this attached project

which was attached earlier,

you therefore shouldn't get any problems.

And hence, now if you save, you see it also still works.

Everything works.

And if I get that modal again,

you see now that one div which we had before,

don't mistake it for the root div,

there was another div before, is now also gone

because I'm now also using this wrapper, this fragment

as it's officially called in the app component.

Now, if this syntax doesn't work

or if you don't like it,

you can always use React.Fragment like this,

and this will then work.

So React.Fragment opening and closing.

This will always work.

You just need to make sure you're importing React.

Or you directly add Fragment as a named import here

in these curly braces from React.

Then you can also use it just by that name.

So that's an alternative.

So that of course is what we'll typically use,

Fragment or React.Fragment or this shortcut.

We're not typically writing our own wrappers,

but of course it is important

that you understand how it works under the hood,

which is why I showed it to you.