Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Displaying Data in the Details Component" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

Now that the router is passing the proper show data to the Details component, Brian completes the user interface that will display the show title, description, year, poster, and trailer.

Get Unlimited Access Now

Transcript from the "Displaying Data in the Details Component" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Brian: Now I think we can go ahead and go make our details page actually do something nice and pretty.
>> Brian: So, get rid of all this crap that we have in here.
>> Brian: Okay, so we have the container, inside of the container, we're gonna have a header.
>> Brian: That's gonna be a header.

[00:00:37]
>> Speaker 2: Couple of questions. Can you push a branch at this point and then-
>> Brian: Yeah, I forgot.
>> Speaker 2: Following up there, so they're saying, props is created by the router itself. Is that true?
>> Brian: A certain amount of them definitely, right? The ID, maybe the ID. The better way to say is many of them are being created by the router.

[00:00:55] However, notice that that show that we're passing down, that's being created by us. That's being attached by us. So it's a mix of both. [SOUND] Bless you. It's just right, so let's go back to what I had before. Okay, let's,
>> Brian: That's push branch here.
>> Brian: Get out of here.

[00:01:27]
>> Brian: Git checkout -b fem-17.
>> Brian: Git commit -m "FEM step 17". Git push origin fem-17.
>> Brian: All right, there we go. So I just pushed FEM-17 for anyone that needs it.
>> Brian: Let's go work on details now.
>> Brian: branding,
>> Brian: svideo. So that's our nice little header that we'll have on here.

[00:02:18]
>> Brian: And here we're gonna have video-info,
>> Brian: h1 className = 'video-title'.
>> Brian: Is that how I did this? Okay so,
>> Brian: Let's do that real quick, so,
>> Brian: On the off chance [COUGH] I'm one that I wanna make my program as resilient as possible once it's being shown to users.

[00:03:00] I would rather have a really bad looking new UI how than rather just errors out crashes. So there's some things you can do to guard against that. One of them as you can say like const params = this.props.params or a blank object. This is gonna prevent you from at least like, now if I refer to params.thing, right, params.whatever, right?

[00:03:27] It's not gonna error, it's just gonna be undefined, so eventually you'll end up showing to them is a blank UI rather than just nothing, right? But another fun thing I can do here now is I can say const { title, description,
>> Brian: year, poster and trailer} = params.

[00:03:52] And so now I can just refer to those individually, saying params.title params.description, params.year is down here in title, I can just say title. I find that a little bit more expressive, but this is just personal opinions of how I choose to write UIs, you don't have to necessarily do it this way.

[00:04:17]
>> Speaker 2: You can also do the triple ellipses params, right, and then it would just unpack everything.
>> [INAUDIBLE]
>> Speaker 2: Yeah, this is better.
>> Brian: I don't think it's gonna work in this particular case. Like this? So object spread doesn't actually exist in ES 6, only array spread. There's a spec out for it but as well that's very future facing.

[00:04:45] I think it'll land, it seem to have some steam behind it, but,
>> Brian: Not a thing yet, unfortunately.
>> Brian: But I like where your head's at. I like thinking of new and interesting ways to solve problems. So again, I'm gonna put parentheses around this because I wanna literally see parenthesis.

[00:05:13]
>> Brian: Okay, and here I wanna do an img className = 'video-poster' and src = and we're gonna do our brackets here. And we're gonna use our es6 template strings again.
>> Brian: public/img/posters/${poster}.
>> Brian: And then we're here, we're gonna do another paragraph, className = 'video-description'
>> Brian: Here we wanna say description and close that.

[00:06:06]
>> Brian: So that's kind of all of our information. And then here comes, in my opinion, kind of the fun part, is we're gonna throw up the YouTube video as well for the trailer.
>> Brian: Video-container.
>> Brian: And here we'll use an iframe, cuz I tell you to tend so, I wanna be displayed.

[00:06:33] I wanna say, fortunately, this is a bunch of stuff to type and there's really no way around it.
>> Brian: Https://www.youtube-nocookie.com/embed/${trailer}, this is actually like the correct trailer we wanna look at. Then you have to say after that, ?rel=0,
>> Brian: &controls=0&showinfo=o.
>> Brian: Again, that's just how YouTube wants its URLs to look.

[00:07:40]
>> Speaker 2: They're asking why that's just trailer rather than params.trailer.
>> Brian: Cuz we pulled it out up here. Same thing we did here for description, year, title. You totally can say params.trailer. I just did it this way.
>> Brian: frameBorder='0' and allowFullscreen
>> Brian: And the pi frame.
>> Brian: Okay, I didn't quite get the URL, I'll push up the branch after this cuz it's so annoying to type.

[00:08:36] But let's go ahead and take a look and see if we worked.
>> Brian: Okay, nothing's yelling at us. Let's refresh the page. And now we have it. That looks kinda weird. We'll have to fix that.
>> Brian: But now we have a nice looking UI, let's figure out what's wrong with the header.

[00:09:03]
>> Brian: What'd I do wrong here?
>> Brian: Container header equals className = 'header', [INAUDIBLE] className = 'branding', brand, sorry. That's what. Okay, refresh. There we go.
>> Brian: I think that's pretty cool, right?
>> Brian: And it's really cool that we were able to get such a, I mean I think it's a somewhat interesting looking UI, that's about it

[00:09:42]
>> Speaker 3: What did you modify to fix that issue with the header?
>> Brian: It was brand instead of branding.
>> Brian: Yeah?
>> Speaker 4: Can you scroll down just a smidge so you can see all the YouTube got exciting stuff?
>> Brian: Yeah.
>> Speaker 4: [LAUGH]