Complete Intro to React, v3 (feat. Redux, Router & Flow) Using the Spread Operator in JSX
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
>> 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.
>> 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.