Check out a free preview of the full Complete Intro to React v2 (feat. Router v4 and Redux) course:
The "Passing Data to the Details Component" 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 uses the same logic from the Search component to pass data into the Details component. He filters the list of shows based on the “id” URL parameter. He also provides the React Router documentation as an additional resource for configuring the component views. - https://react-router.now.sh/

Get Unlimited Access Now

Transcript from the "Passing Data to the Details Component" Lesson

[00:00:00]
>> Brian Holt: Now because the client app is aware of what the show is, right? Now we can make it past the correct show, down to details.
>> Brian Holt: So if we come back to clientapp.js.
>> Brian Holt: We're gonna do a same, similar thing that we did here with component. But what we're gonna do instead of passing down all of the shows, we're only going to pass down to the correct show, okay?

[00:00:25]
>> Brian Holt: And we're gonna base that on the ID parameter, right?
>> Brian Holt: Cuz we don't wanna have to pass down all of the shows. We don't the details to have to select it's own show. We wanna say here is the correct show for you.
>> Brian Holt: Yeah, hold on, let me push a branch real quick.

[00:00:56]
>> Speaker 2: Question while you're doing that as well.
>> Brian Holt: Sure.
>> Speaker 2: Asking why is defining prop types important if in production code it isn't included?
>> Brian Holt: Debugging purposes. Debugging purposes and forced documentation. In other words, you don't have to. But our linter forces us to so we do. I think it's a good idea, too.

[00:01:22] So, I'll say at Netflix we do do prototypes, and I have found it helpful.
>> Brian Holt: Git add commit. Good job, okay.
>> Brian Holt: Okay, so I just pushed out v2-13.
>> Brian Holt: Other questions?
>> Brian Holt: Okay.
>> Brian Holt: So what we're gonna do now is we're gonna make this another function right here.

[00:02:07]
>> Brian Holt: This is going to be a little bit more complicated. So, this is going to take in props as well.
>> Brian Holt: Remember, these are the props that we saw being passed into search when we dumped those out. So, inside of these props is going to be whatever this ID is.

[00:02:23] So, we can use this ID to match up to the correct show to pass down to details. So what we're gonna do is we're gonna say, we're just gonna put a filter.
>> Brian Holt: There is a better way to do this, but I'm just gonna do it this way.

[00:02:40] Shows.filter
>> Brian Holt: props.params.id===show.imdbID. We'll return details show={show

[0]} {...props} /> component. So, why is this imperfect? Well, we're making a big assumption that id is going to be a correct show. This is obviously not the way you wanna do a production if the ID was not found, you'd wanna show 404 or redirect somewhere else.

[00:03:32] All things you can definitely do. For now, we're just going to assume it's always going to be a correct ID.
>> Brian Holt: The way you would do that, so basically if I don't have any shows of length zero, what you would do is instead of returning details you would return to redirect component, and redirect components will redirect.

[00:03:55] That's the way that they work. Or you could also do like a return the missed page, the 404 page, yeah?
>> Speaker 2: Question, is there any lightweight, good substitute for React Router, just like Preact for React?
>> Brian Holt: React Router is pretty much the de facto standard. I think the answer is, is there are, are there's, I'm not aware of them.

[00:04:25] We do use one at Netflix, but it's internal and not open source. So, I guess before react router, I used director, but director is not necessarily specific to react, it's just a router library.
>> Speaker 2: Another question, is there another way to render the component of each route and pass properties to it without having to call an anonymous function?

[00:04:51]
>> Brian Holt: Yes. [LAUGH] Yes, there is.
>> Speaker 2: I kinda thought there gonna be real answer.
>> Brian Holt: Yeah, it's there is a lot of ways to do it right. You can probably make some sort of component that encapsulates this behavior. I like this because you see everything happening right here so to my preference to do this way and you're stuck in my world so deal with it.

[00:05:18] Just kidding I don't know a better way to explain that.
>> Speaker 2: On line 24 does there need to be a variable declaration for the cost?
>> Brian Holt: Yeah yeah thank you. [SILENCE] Cool. Any other questions?
>> Brian Holt: So now, if we save this and go to details such as
>> Brian Holt: And it'll just reuse this the way it is right now, we can now hopefully see the correct TV show being passed down to details.

[00:06:16]
>> Brian Holt: So, if I details/ and remember this is gonna match the imdbID from data.json. So, I'm just gonna grab House of Cards right here. This number right here. Copy that, paste that right here.
>> Brian Holt: Notice that I'm getting the show as House of Cards. Any questions of how that got there?

[00:06:43] I mean we put it there. That's how it got there. But is anyone confused with why it got there?
>> Brian Holt: So again, like I find this really compelling because now we've taken this logic out of deciding which show to pass into detail, out of detail. Details just gets to be a nice dumb route that just shows beautiful markup and does nothing else.

[00:07:08] Only thing that logic in the router which That logic more belongs in the router because your routing it to the correct show. I think it's cool.
>> Brian Holt: So, that's why we did it. [LAUGH] Cool. Any other questions before I move on?
>> Speaker 3: I think you touched on it, but could you maybe just mention again if you did If you remove the ID from the Details path, that just kinda renders kind of a blank state.

[00:07:38] So, what would be a good way to handle that?
>> Brian Holt: So, if I had some time at the end, I'll touch on it. But there's a miscomponent that React router shift with. So, you would just well, this one get the miss. It would, it would get miss. So, you would hit the miss, and then you could just wrap that to a 404 page.

[00:08:03]
>> Speaker 3: Okay.
>> Brian Holt: Or you could render a redirect component, and anytime you render out a redirect component, react router will redirect somewhere else. So you'd redirect to a better place.
>> Speaker 3: Okay.
>> Brian Holt: Both of those are in the reacts, router, dot come. I make sure it is not changed.

[00:08:24] I'll have a link in my notes if you want to go grab it from there. But this is where the docs are now for v4, specifically. If you go to React Router's main web page right now, it's still the v2, v3 docs. So, the key is look for the red.

[00:08:48] The red is v4. If it's blue, then it's v2 or 3. It's secret language.