00:00 All right, so we've got our props object. We just need to get it onto this element. How do we do that? Well, as a reminder, if we wanted to make a props2, then we can spread it like this. We make the object, and then we add the props we want. And we can say whatever and hi, and those will combine.

00:18 You should be pretty familiar with that if you've been using JavaScript for a while. So what's interesting is JSX kind of adopts the same idea. And that's how you do it. Ta-da! So we're just going to take the props object, spread those props onto this div element. And again, we can self-close if we want to.

00:36 So we could say, yoink. And that will totally work. We get our hello world. It's got the correct container. And the thing I want you to kind of play around with a little bit is the placement of the props. So what if I wanted to override the class name?

00:53 I could put a class name here, and we'll say my container. If I save that, we take a look at our output. We've got a class of container, but I thought I wanted my container. And the reason for that is this works pretty much exactly the same as object spread.

01:12 And in fact, if we take a look at the compiled version of this, then you'll find we have an extends function, which is basically just object assign. And what Babel is doing is it says, hey, I want to create an object that or basically assign an object here.

01:30 We're creating a new object right there. And here are the props from the object. And then we want to add any of these additional props after. So the way that object.assign or the spread works is whatever props come or properties come later are going to override the ones before.

01:47 And so I could also have another class name, my other container. And if we save that, now aside from TypeScript being kind of annoyed that we have multiple class names on there, what we're going to see here is we're going to get extends. Here's our first object, class name, my container. Then we've got our second object, props.

02:07 And then our third object will have a class name, my other container. So my question to you is which class name is going to win? And if you said my other container, you're right. So whatever comes later wins in the event of a disagreement. And so we could do the same with children. But children is a little bit special,

02:25 because what if I say closing div right here and say hello or goodbye world? What do you think is going to win in this instance? We could put a children prop right there. You know that the props here would override that, because we've got a children property on this props object.

02:43 But does the children that shows up between the tags, does that override the props object or not? What do you think would be correct? Well, if you said the children syntax should override the children prop, you're right. That's how that works. So if we take a look at the compiled output now, we'll see we've got our props. We've got our elements.

03:02 We've got our extends, class name, props, class name. And then we have the third argument being goodbye world. And so that's the way that the create element API works is the third argument or the following arguments are going to override whatever props are passed.

03:19 So that is a good framework or idea, something to keep in mind as you're working with props and spreading props and adding and like having defaults and stuff like that, is the position of where you put this spread is going to determine how the different props are going to be overridden.

03:38 And it's not just the way that this extends works. This is a syntax thing with JSX. That is part of the spec that when you do a prop spread like this, if you have additional props thereafter, those ones will override the first. Additionally, you could actually have another props too.

03:57 And this could have a class name of la-di-da. And then we can spread the props too. And depending on whether that comes before or after, we'll determine whether that wins in the event of a conflict. So we're going to get la-di-da because it comes after.

04:15 And of course, we'll get container. Now that it comes before. So there you go. That is all of the fun things you can do with spreading props objects onto your React elements.