Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Finishing the Details Component" 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 finishes the Details component by declaring the propTypes object. He then adds the rest of the user interface components which displays the title, year, poster image, description, and the trailer for the selected show. - https://github.com/btholt/complete-intro-to-react/tree/v3-16

Get Unlimited Access Now

Transcript from the "Finishing the Details Component" Lesson

[00:00:00]
>> Brian Holt: So let's go and make details actually look like a nice page, right? Cuz right now it's just kinda outputting data. So we're gonna make this an actual method. Does anyone have any questions?
>> Brian Holt: It's a good question to ask him, good time to ask.
>> Brian Holt: Okay, yeah, go ahead.

[00:00:29]
>> Speaker 2: Are those types.jsx get imported again?
>> Brian Holt: It's automatically imported because it's in the flow type directory.
>> Speaker 2: So when you have the comment on the top it just imports all of it?
>> Brian Holt: Yep, yep, yep, yep, it's kinda magical. There are ways to do it that you don't have to go through flow type, but that's just a established cow path, so I just tend to follow that.

[00:01:00]
>> Brian Holt: So const title, description,
>> Brian Holt: year, poster, trailer = props.show. Shows, nope, show rather.
>> Brian Holt: If you've never seen this before, this is called destructuring, which came with ES6, ES2015 as well. It's basically saying inside of props.show, I know I have a variable called title. Pull it out and call it title.

[00:01:39] If you wanted to write it the long way, this would be const title = props.show.title, const description = etc, etc, etc, right? This is just shorthand for that.
>> Brian Holt: Now it's gonna be yelling at me, it's like hey, I don't have propType validations for this, but pretty easy for us to do.

[00:02:01] We can say props, and we're gonna say, you're gonna be getting a show, which is a Show.
>> Brian Holt: Okay, now they look like there's still errors, but that's because we haven't used them yet which ESLint doesn't like. Sometimes it's kinda hard to figure out who's yelling at you now.

[00:02:27] [LAUGH] But I promise it is all worth it. Okay, so what we're gonna do here is we're gonna delete all this cuz we don't need it anymore. And we're gonna make a header, which is gonna be an h1 with svideo so you have a nice header again. Then, underneath that, we're gonna put a section,

[00:02:52]
>> Brian Holt: With a h1, bless you, h1 with title,
>> Brian Holt: h2,
>> Brian Holt: With year.
>> Brian Holt: And again, if you remember we wanted this literally surrounded with parentheses around the year, so we're just gonna put parentheses around that.
>> Brian Holt: We're gonna have an >img src={'/public/image/posters/${poster}'}. And then we're gonna give it an alt because we're good citizens of the Internet.

[00:03:39] And then we're gonna say poster for,
>> Brian Holt: Poster, or no, title.
>> Brian Holt: Not only does putting an alt tag, that's already important for accessibility. In fact, there's a great Frontend Masters course by John on accessibility that you all should definitely watch, because we are all deficient at accessibility.

[00:04:08]
>> Brian Holt: But also Airbnb, the ESLint rules will enforce on you to write those alt text, so you have to [LAUGH].
>> Brian Holt: Okay, and then here we're going to do a description as well.
>> Brian Holt: Okay, underneath this section, we're gonna do a div.
>> Brian Holt: And then here we're gonna do something kind of fun, we're gonna put an iframe, cuz who doesn't love iframes?

[00:04:50]
>> Brian Holt: But we're actually going to embed the YouTube trailer for each individual show. So the first thing, and you're just gonna have to bear with me because the URL is super long. https://www.youtube-nocookie.com/embed/${trailer}?rel=0&amp:controls=0&amp:showinfo=0.
>> Brian Holt: That's it,
>> Brian Holt: FrameBorder="0", allowFullScreen.
>> Brian Holt: And then I think this is a new one, I think iframes require, in fact, it says here requires a title.

[00:06:05] Again, which is for accessibility purposes, you have to say title=
>> Brian Holt: {'Trailer for ${title}'. This is so a screen reader, if they tab into it, it's gonna identify the iframe by what the content is inside of it, and it's gonna do that by the title.
>> Brian Holt: If you haven't looked at your site with a screen reader, you should definitely do that.

[00:06:42]
>> Brian Holt: Okay,
>> Brian Holt: So now hopefully, if we come back to our page and we're going to go to details and then just one of the valid imdbIDs. You should be able to go in there and you should be able to see a nice looking details page, right? It's got the tittle, it's got the year, it's got the poster up there, the little description.

[00:07:10] So it'll look something more like that. And then you can actually click it and play the video and all that kind of stuff.