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, v3 (feat. Redux, Router & Flow) course:
The "Using the Spread Operator in JSX" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

Brian explains how to use the ES6 spread operator to pass properties into a component. The spread operator simplifies the syntax making it easier to add/remove properties in the propTypes object. The spread operator also removes the need to wrap the properties in a shape. Brian takes questions from students.

Get Unlimited Access Now

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

>> Brian Holt: So I wanna show you something, I have it here in my notes. But ultimately, I think this is an anti-pattern so we're gonna leave it the way it is.
>> Brian Holt: Well, up to you. So if we go back to Search, notice how we're passing in Show as one entire object, right?

[00:00:19] But if would be kind of nice if we could do kind of passing all of the,
>> Brian Holt: All the different properties as top level items, right? And also the same, that we could just say props.title, right?
>> Brian Holt: So there's a couple of ways you could do that.

[00:00:40] You could totally just say title = [show.title] right, and pass in each one of them individually, it totally would work.
>> Brian Holt: There's another way to do this, and it's kind of an anti-pattern but I'm gonna show you how to do it because I'm sure you're gonna run into it.

[00:00:59] You can say, so this is called the object spread, which is not yet a part of JavaScript, or at least, let me rephrase that. This is specific to JSX, but it's emulating this object spread operator which is stage three, I believe, now for JavaScript. The array spread is a part of JavaScript, but object spread is forthcoming.

>> Brian Holt: And this is just saying, rather than me saying, title = show.title, description = show.description, it's just saying spread all that stuff out so it's all top-level items. So if we do this, in fact, we'll just do it for now so you can just see how it's done.

[00:01:45] Now we get to go back here and everywhere it says show like that, we get to eliminate.
>> Brian Holt: So now it just says, and yep, that one too. And rather than show being a shape, we're just gonna delete that and delete that, and now they're all top level items.

>> Brian Holt: Any questions about that?
>> Brian Holt: So, a place where I would be okay using the spread operator is when I know what the shape of every single item is, right? I know everything that's in that item. The place where you run into problems, and let's say inside of this data.json.

>> Brian Holt: In fact, it's kind of already happening, right? So we have this imdbID, right, that's being passed down into our ShowCard now. I guess it kind of was before because it was kind of a tag along with the show item. But that's being passed onto the ShowCard and the ShowCard does not need it, which is kind of a problem.

>> Brian Holt: It's a problem in a sense of you're moving around a bunch of data that you don't have to, and it's just messy, it's messy coding, it's not being very explicit.
>> Brian Holt: So in this particular case, it might make sense to you to just say, actually go out and list each one of them.

>> Brian Holt: If there's one thing I've learned over the years of coding, it's that usually being explicit is worth it, even at the cost of writing more code.
>> Brian Holt: So up to you, we'll leave it for now.
>> Brian Holt: But that's what that looks like.
>> Speaker 2: But it sounds like prop types is okay with extra attributes or properties.

>> Brian Holt: Yeah it's not gonna complain. So, we have a new thing here kind of showing up, yeah. Now if you did it that, go back to ShowCard and get rid of shape, so we can shut up the linter.
>> Brian Holt: So cuz now we don't need shape anymore, we just need string.