This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Using the Spread Operator in JSX" Lesson
[00:00:00]
>> 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 props.show.title, 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 ...show, 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.
[00:01:29]
>> 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.
[00:02:11]
>> 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.
[00:02:36]
>> 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.
[00:02:55]
>> 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.
[00:03:17]
>> 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.
[00:03:39]
>> 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.