‫Let's now learn what a React Fragment is
‫and when exactly we might need one.
‫So let's actually come here to the final version
‫of the application so that I can show you
‫that we are actually still missing something
‫and that's this sentence right here.
‫So there's a paragraph of text right here
‫that I'm just going to copy now
‫and you can maybe pause the video and type it,
‫or you can just type something shorter.
‫So let's for now place that paragraph here,
‫give it a save, and yeah, then it looks exactly the same.
‫But now what if we have no pizzas at all?
‫So in this case,
‫well, then we actually don't want to show this,
‫so this sentence right here, we only want this one,
‫so the one that's coming here
‫from our conditional rendering.
‫So let's put that back.
‫And now what that means is that we only want
‫to render this paragraph here in this situation.
‫So let's grab that paragraph and place that here,
‫because again we want to render this paragraph
‫and this UL in this case,
‫but immediately React starts yelling at us.
‫So JSX expressions must have one parent element.
‫And so this is exactly what we learned
‫in the Rules of JSX lecture.
‫So a piece of JSX, no matter where it is defined
‫can only have in fact one root element.
‫And this has happened to us before
‫and the way we always solve this
‫was by simply wrapping everything
‫in a div or some other component, so let's try that.
‫You don't have to do this.
‫And this is just to show you
‫that this will then actually mess up our formatting here.
‫So this is actually not really what we want.
‫We do not want to render one element
‫which contains these two,
‫but we really want to render these two elements here,
‫so these two elements in separate
‫without having one element as a parent of these two, right.
‫And so this is the case in which we need a React Fragment.
‫So a React Fragment basically lets us group some elements
‫without leaving any trace in the HTML tree, so in the DOM.
‫So it looks like here we need a React Fragment
‫and that's very easy.
‫All we have to do is to basically delete everything here
‫just like this and so this is now a fragment.
‫So let's save, and then we are back to what we had before.
‫So now let's then inspect the DOM tree,
‫as I was saying, just to show you
‫that actually this didn't create any new element at all.
‫So here we have the header
‫and I see we still have that footer class there.
‫Of course, let's get rid of that.
‫All right.
‫So we have our container, then we have the menu,
‫then we have the h2, so this one, and then exactly,
‫we have the paragraph and the UL, but in separate,
‫so not wrapped in anything.
‫So this is completely invisible here
‫and it's exactly what we were looking for.
‫And that's it, that's all a React Fragment is
‫and it's all that it does.
‫Now, sometimes we need to add a key to a React Fragment,
‫so, for example, when we are using it to render a list
‫and so then we need to actually write it
‫in a slightly different way.
‫So first, let's make sure that we have React imported
‫and we do, so it's right here
‫and so we can write React.Fragment.
‫And then down here we need to close that React.Fragment
‫and so then the result is exactly the same.
‫But if we need it, then here we could add a key
‫of just anything.
‫All right, now we don't need a key,
‫so we can just go for the short version,
‫which is of course a lot nicer, all right.
‫Let's try maybe something else.
‫Let's say that here, we actually didn't want this container,
‫so maybe we just needed all our elements
‫right here directly in the root.
‫So basically what we wanted in this case
‫is the app component to return three components,
‫so these three elements made out of these three components.
‫And so then that would be very simple.
‫Now, in our case,
‫it's of course going to mess up the formatting
‫because then we are missing the container class,
‫but just as an example,
‫this is what it would look like in the end.
‫So we would have our root
‫with immediately these three as direct children.
‫But let's put everything back.
‫And yeah, I think that's all
‫that you need to know about React Fragments.
‫It's a very simple concept,
‫which basically allows us to have more
‫than just one element inside a piece of JSX.