00:00 So the solution for this is actually really easy. We literally just say this boom and now we've solved the problem, right? But let's try to understand why this works. Okay, what is going on? And why do we have the problem in the first place? Why can't I just do this get rid of that and get rid of that? Why does this not work?

00:17 Why is Babel complaining that I can't compile this what is going on here? Well, let's let's take this to Out of JSX land into JavaScript land for a second might help us understand what the problem is so elements with Create elements and now we'll use our AI assistant to help us. Oh, no, come on

00:38 And then react dot create elements There we go. Now. Thank you AI assistant and so now we've got the like non compiled version of Our create element and I'm actually going to change this just ever so slightly I'm going to grab those and not use an array for this and instead

01:01 We'll just use additional arguments because that that will work just as well. Okay, great. So What happens if we say and actually let's render this one out. There we go. That works also Yeah, what happens if we say hey, I want to get rid of this div container and just have these to be direct descendants

01:19 Of the root. Well, so we're going to need to I suppose delete this div with its class Of container and we'll delete this part right here also and now we're getting a bunch of syntax errors there

01:34 We're getting errors from Babel trying to compile it and the reason is like this doesn't make any sense, right? We're assigning elements with create element to react create element and then comma React create element. So maybe remove the comma right? But no, no, that's that's not going to work either

01:53 See now it's being assigned to this expression and then we have this other expression that is just Disappears and so now we just have here Sam's favorite fruit, but we don't have the UL And so the reason for that is just because the way JavaScript works You cannot assign a single variable to two values It doesn't work that way

02:14 And so this is why we need to have another special kind of element that can be a container But doesn't have a DOM representation. And so that is what a react fragment is so we can say react fragment It's not going to take any props and then we save that and now we're getting what we're looking for

02:34 So we've got our root and it's got these two Children that are siblings of each other That are direct descendants, we don't have any DOM representation of this special type of element. That's what a fragment is It's just a special kind of element that doesn't have a DOM representation and kind of just disappears So to accomplish that up here we can say react

02:55 Dot fragment that's the type of element that we're creating And that works out just fine. And here we're going to say element right there Or we can do the shorthand syntax, which is the one I am typically going to be using myself as I generally use the shorthand syntax you get used to that really quick and

03:15 That is fragments now, you know how to get things in the right position so that you can style it properly and whatever Is using react fragments? Good job