00:00 We need to talk about fragments. This is something that you use not super often, but it can be really useful if you have multiple elements that you need to be siblings of each other, and they also all need to be direct descendants of a particular element. This is pretty applicable for things like CSS Grid or Flexbox or something like that

00:18 that require a certain layout for the CSS to apply properly. Tables is another good example, though we don't use tables quite as much these days. But yeah, the idea is if I wanted to make it so that this is what appears in our output and we just get rid of the container,

00:38 that means I need to have two things that I render to my root, right? We're calling create root and then render. We need to pass two elements to that, and additionally, this can go on beyond once we get into components and stuff like that. Maybe I want to return more than one element

00:56 for my component, but that doesn't quite make sense, and we'll talk about that a little bit in this exercise. But yeah, this is the desired outcome. I want to be able to not have a container div and both of these elements just go right into the root. How do you do this? You do this with fragments.

01:11 So there are actually two syntaxes or syntax-y, syntax-i, I don't know how you pluralize that, but there are two for fragments. You can use the React fragment component or if you import it with like import fragment from React, you could do it that way too.

01:29 And then you put this inside of there and that will be a fragment, or you can just do open and closing angle bracket and that is considered a fragment also. And this is how you can wrap something, like right now we have it wrapped in a div, you just switch it to a fragment and now those two elements that are inside

01:48 or however many there are, are just siblings and they'll be rendered as direct children of wherever that fragment is gonna be rendered. And like I said, it could be useful for styling in particular. So have a good time getting rid of that div with the container class name and having these be direct descendants of our root element.

02:08 We'll see you when you're done.