All language subtitles for 002 JSX Limitations & Workarounds_en

In React we're working with JSX.

We work with JSX all the time here

in this course already.

In this course project

which we worked on in the last course module

which you find attached to this lecture by the way

in case you didn't follow along

you can simply download it

extract it, run NPM install

and NPM start and you're good to go.

In that project we of course used JSX.

JSX is that code you return in your Components

which in the end will be rendered

to the real DOM by a React.

That's what JSX is

and we use it all the time.

But JSX has certain limitations

specifically there is one limitation

which we all has already faced in this course.

If we have adjacent root level JSX elements

like in this example

we'll get an error.

And with root level

I mean that we have two JSX elements next to Java

not wrapped by another JSX element.

And we then return these side by side JSX elements

or we try to store them in variables.

This will not work

because in React in JSX in general

you can't have more than one root JSX element.

So if you return a value or if you store a value

in a variable or in a constant or in a property

that value must only be exactly one JSX element

not two or three or four side by side adjacent elements.

Now that one element which you are allowed to have

may of course have more children

which then also can be adjacent to each other.

But that top most element

which you're storing or returning

must only be one element.

And the reason for that

is actually not that difficult to understand

because this also isn't valid JavaScript.

You can't return more than one thing in JavaScript either

you can return one number, not two

you can return one string, not two.

Of course you could return an array

and there you could have multiple numbers

but an array is already a new value.

An array is just the object

so you still only return one array,

one object, not two arrays at the same time.

So that is really important to understand here

your JSX code translates into React create element

like you see it here at the bottom of the slide.

And you must only have one React create element call

which you return.

Now any nested JSX elements

so inside of that one root element

could be side by side

because into the React create element world

those children of that root element

would be the third and fifth and so on argument.

And that's something I had a closer look

at in the basics module

where we explored how JSX translates into

React create element calls.

But because of that natural limitation

of JavaScript we must only have one root JSX element.

Now how can we work around that?

There is one solution

and actually we can already use

that solution here in

that add user Component in

that provided project which you find attached.

Here I do have a rapping div

and that is a workaround.

You can solve this problem

by simply wrapping the adjacent elements with a div.

If you do that

if you wrap them with a div

then you only have one thing that you return

only one value.

It's a bit like returning free numbers

by putting them into an array.

Here we're returning to nested JSX elements

by putting them into one div which we return.

Now this also doesn't have to be a div

you could be using any element here

you could also be using a custom Component here.

The main thing that matters

is that you only have one value

which you return or which you store it in a constant.

And that's all to what we're doing here.

Now there're actually is always an alternative to that

instead of using a div

we could use a native JavaScript array.

I could remove my opening and closing div tags

and put my card Component here

and that dynamic expression here

into an array, separated by commas.

I just would need to remove these curly braces here

because we're no longer inside of JSX here

we're inside of an array.

That would be valid

but this has a little gotcha.

We can return an array

because React is able to work with arrays of JSX elements.

We did utilize that when we output our list

of users here

or also earlier in the course

you learned about mapping a raise of data

to JSX elements in the lists and conditionals module.

So React knows how to work

with a raise of JSX elements and hence

of course here

we could also return such an array of JSX elements.

If we do that

and we previewed application

we do get a warning though

because whenever you're working with an array

of JSX elements

React wants a key on every element.

And that's no exception here

it wants that key

if you map dynamically through a list

of data and map that data to JSX elements

but it also wants such a key

if you have a hard-coded array of JSX elements

as we have it here.

Now of course we can simply add a key

and since this is not generated dynamically

we can hard-code keys here

error modal for example

and add user a card.

We could add the key prop

with our own invented well use

and we would be fine.

And that would be perfectly fine

but typically you don't use this solution

because adding those keys

wrapping it in an array

is a little bit cumbersome.

It's way easier to simply add a wrapping div here

like we had it before.

So I can just go back to that

add my div here and now wrap this here back

into curly braces

and remove the comma here

because now we have a dynamic expression

instead of JSX again

so we need the curly braces to evaluate this expression.

So that's simply more convenient

and therefore typically we use the wrapping div.

However with the wrapping div

or generally any wrapping element

a new problem arises.

Now we can end up with div soup.

So we can end up with a real DOM that's being rendered

where you have many nested React Components

and all those Components

for various reasons need wrapping divs

or have wrapping Components.

And you have all these unnecessary divs being rendered

into real DOM

even though they're only there

because of this requirement or this limitation of JSX.

And this is not an unrealistic scenario.

In bigger applications

It's a very possible that in your final HTML page

which is being served to your end users

you have a lot of unnecessary divs or other elements

which are only there

because you needed them as wrappers

even though they don't add any semantic

or structural meaning to your page.

Now of course you don't have to care about that

you might be fine with that

but it could break your styling.

If you have a wrapping div somewhere

and you use nested CSS selectors

that div could break stylings.

And even if it doesn't break your styling

it's still not a good practice.

You're rendering too many HTML elements

and ultimately that also makes your application slower

because the browser needs

to render all those elements

and React needs to check all those elements

or at least some of those elements

if content needs to change.

So rendering unnecessary content is generally

never a good idea in programming.

Hence this wrapping div

or this wrapping element approach is okay

but not ideal.