This course has been updated! We now recommend you take the Complete Intro to React, v7 course.

Check out a free preview of the full Complete Intro to React, v2 (feat. Router v4 and Redux) course:
The "Making the ShowCard Component Clickable" 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 completes the ShowCard functionality by making the ShowCard components clickable. He uses the Link component which directs the router to the details route with the current ID appended.

Get Unlimited Access Now

Transcript from the "Making the ShowCard Component Clickable" Lesson

>> Brian: Lastly, we want to make it so if you actually click on, the show card will actually take you to the details page, right? Because, right now, you kind of have to URL hack it to get it to work. So, let's go back to show card, which is where we'll end up.

[00:00:19] Hopefully, this is what Search was for the person that was asking.
>> Brian: Okay, so let's go to ShowCard real quick, and the only thing is we're gonna basically wrap everything in a link.
>> Brian: So, we're gonna say Import Link.
>> Brian: From react-router. We're gonna just wrap everything in a link.

[00:00:54] Link to /details/$, this.props.indbId.
>> Brian: Oops.
>> Brian: That's all we did is we just imported link. We're having it take you to the details page with the proper imdbID and just wrap everything in a link.
>> Speaker 2: So, let's see Header, again, for a second. [LAUGH] And Mario says, if header returns undefined, should we move prop types below the function definition?

>> Brian: I mean, we did, right? That's what we did right here. Does that, am I misunderstanding?
>> Speaker 2: I guess I'm not quite sure what they're asking either.
>> Speaker 3: We looped it and then moved it back.
>> Brian: Yeah, exactly.
>> Speaker 2: Okay, okay, maybe that was it.
>> Brian: Yeah, I moved it to demonstrate that it wouldn't work.

>> Speaker 2: Right.
>> Brian: But, this is how you do it with the SX classes.
>> Speaker 2: Scott is asking, do you have to use the link for routing to work? Why not just use the a bracket.
>> Brian: You can, but you get some functionally for free by using link. So if I change my router, for example, it will still work.

[00:02:35] It won't break all my links. And breaking everything is generally something I try to avoid. So that's why you use Link.
>> Brian: Ultimately what Link renders out anyway-
>> Speaker 2: I see, what they're talking about, I think is that the last push. I believe, the header props was still before.

>> Brian: Okay.
>> Speaker 2: So- Good job, Brian. Okay.
>> Brian: Yeah, I'll push a new branch here momentarily.
>> Speaker 2: Okay, okay. Also, I think they found a typo.
>> Speaker 2: Someone says there's missing an equals after the two, maybe in the link to part.
>> Brian: Probably. Show card. Yup, right there.

>> Speaker 2: Good catch you guys.
>> Brian: Yeah, most of you are maybe used to doing pair programming. It's best if you just have 200 people watching you code. That's way easier.
>> Speaker 2: Yeah, also adding the IMDB ID to prop type?
>> Brian: Yeah, we'll have to do that too, good call.

>> Brian: And you can even just do this, right, imdbID, and then drop this stop props right there.
>> Brian: I really like this pattern right here. I end up doing it a lot because I feel like when you come down here, this just gets really readable. So they say, okay.

[00:04:11] That's the title. You don't have this this.props to parse out in your brain too.
>> Brian: Okay, so let’s make sure that this actually works. So, now you can see you can click on each one of these. And if I click on Bloodline, which is an underrated show.
>> Speaker 2: Question, about is required?

[00:04:34] Why are you using it for your prop types?
>> Brian: I just didn't. [LAUGH] So if your component requires something and it wouldn't work without it. Like for example, our show cards can be pretty shitty if it doesn't have all of these things, right. Then you just wanna drop isRequired here.

>> Brian: I just didn't do it. It is, it's even in my notes, right, so.
>> Brian: Oops.
>> Brian: What you could do there is just say .isRequired.
>> Brian: So yeah, if you want React to yell at you if it doesn't show up, then put isRequired. That's the gist of when you would put it versus when you wouldn't.

>> Speaker 2: Okay, so Martin is getting an error about warning about React.createElement. Type should not be null, undefined, boolean, or number.
>> Brian: So you'll see that often times if you. Like for example, if I put let's go to Search.js real quick. So I, I'm importing header right here right but if I go back to header and I forget to put this export.statement down here so it's not exporting anything so whenever I import header it's just going to get undefined.

[00:06:07] And then if I try and render out that undefined. It's going to give you a warning that looks like that. Usually that's an export problem. It means somewhere you are trying to render something that's not a react component. I find that's usually a problem with export.
>> Brian: Other questions?

>> Speaker 3: Can you talk a little bit more about passing around functions between components? The way you do with handle search term change?
>> Brian: Yeah, okay, so passing around a function like I did with handle search term change. So just keep in mind that when you're passing around parameters to all these different component, they're just java script primitives, right, or whatever you can score in a variable can be passed around in java script, so I'm just passing down a function.

[00:07:06] Right? This handle search term changed right here. This is being passed in rather from search. So it's calling this method, right? And if you remember my rant that I had yesterday about if you have a problem with the component, the only place that can modify a component is itself, right?

[00:07:26] So this, that setState right here, the only place that I can call setState is the component itself since this is where we're keeping track of it. So instead of having some external method that it can call to modify the state, what it does is it passes down a method where it modifies itself and it.

[00:07:45] Exposes that function to another component. Does that make sense?
>> Speaker 3: Yeah, that makes perfect sense. That's what I figured was going on. So the reason you do that is that the value of this It is preserved when you pass that function so that this can refer to search so that it can modify its own state.

>> Speaker 4: I'm not a super-java script person, and that's a very functional thing. [INAUDIBLE] is a function as a first-class citizen, so I appreciate that.
>> Brian: Yeah, definitely, so JavaScript context is just a beast. Like what this is, is always a big question. So again, I'm gonna plug Kyle Simpson's Advanced JavaScript class again.

[00:08:30] He really well explains what this can be.
>> Brian: But I talked a bit like while a createClass. The reason why we don't have to do any sort of fancy binding is that this is auto bound to wherever it's created, thanks to the create class methodology. So it's bound to search.

[00:08:50] If we were doing it with a ES6 component, we would actually have to explicitly call bind to make sure that it stayed bound to search.
>> Speaker 3: Sure.
>> Brian: Just so you know.
>> Speaker 3: Cool.
>> Brian: Other questions?
>> Brian: That was a good question. That was definitely a good thing to point out.