This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Intro to React, v2 (feat. Router v4 and Redux) course:
The "Using the Spread Operator in JSX" Lesson is part of the full, Complete Intro to React, v2 (feat. Router v4 and Redux) course featured in this preview video. Here's what you'd learn in this lesson:

Brian spends a few minutes explaining how to use the ES6 spread operator to pass properties into a component. The spread operator simplifies the syntax and makes it easier to add/remove properties in the propTypes object. The spread operator also removes the need to wrap the properties in a shape. The code for the application up to this point is on the v2-9 branch.

Get Unlimited Access Now

Transcript from the "Using the Spread Operator in JSX" Lesson

>> Brian Holt: So, I'm gonna show you one more trick to do with JSX. So if you go to Search. It's kind of annoying to say this dot props dot show dot blah a bunch of different times. It's really nice if you can shorten that. So, there is a trick with JSX.

[00:00:16] I can delete this show thing, okay? And then I say dot dot dot right there.
>> Brian Holt: This looks like and acts very similar to the spread operator from ES6. Make no mistake, this is specific to ES6. Or sorry this is specific to JSX, but it's meant to mimic that idea.

[00:00:38] And this is basically saying I want you to take all of the properties that are in show and spread them out as if I had declared each one individually. Or in other words, this would be the same as saying poster={show.poster}, title={show.title}, right? And going out and saying each one of those individually.

>> Brian Holt: You may not always want to do that. I usually argue that explicit is better, so if you want all those things, it's sometimes better to go out and list those out. But for the sake of just showing you how to do it, we gonna go with this,

[00:01:20] I would say this is most akin to the object spread operator, which is not yet a part of JavaScript. I believe that landed with ES8, ES 2017, yes 2017.
>> Brian Holt: So there's that. Save that. Now come back to ShowCard. So now is not Now it's this, this.props.poster, right?

[00:01:47] We cut out the show part of it. So what we need to do here, this isn't that we're pulling out of. It's just this.props, right? So, drop the show part. And this is no longer a shape, right? This is just those.
>> Brian Holt: Right, just straight on the prop types.

>> Brian Holt: Now, why is this better? I would say typically this is kind of a better way to do it. Because let's imagine you have another entirely different part of your app that you also want to use the show-card. If you don't have the show objects all ready premade for you, you have to kind of simulate creating them, right?

[00:02:35] So you have to create an object that has a show object and then you put all those things inside of it. It's kind of a pain in the butt. It's better if you just have this explicit, simple API that's like, okay, you've got a poster, title, year, description and it just knows how to display it.

[00:02:51] So, I would say less nesting is almost always better when it comes to propTypes. That's a Brian Hault opinion, but I feel like that's pretty uncontroversial.
>> Brian Holt: I have plenty of controversial ones.
>> Brian Holt: Okay, any questions about that? This should still work now. So, if you come back over here, refresh.

[00:03:11] It broke, cuz I stopped turning it. Mpm run dev.
>> Brian Holt: Yeah, I gotta get rid of those. So get rid of Boolean and shape.
>> Brian Holt: Refresh. Okay, so that all works again, and we unexpected account. Yeah, I fixed that, so cool. Everything's passing lint, and everyone's happy.
>> Brian Holt: And.

>> Speaker 2: Question, Jacob's asking how can I set a default value?
>> Brian Holt: Default value for props?
>> Brian Holt: I believe there's a method called getDefaultProps.
>> Brian Holt: I never use it, so.
>> Brian Holt: I'm pretty sure it can be done. I just don't typically think that's, I think if you're using getDefaultProps in all of the place, you're probably doing it wrong.

[00:04:27] If that doesn't make sense that you're doing it wrong, we're gonna go over state here momentarily. And so, if props versus state doesn't make sense after that, re-ask the question.