Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Showcard Link" 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:

Spurred by a question from a student, Brian works on polishing the demo application to link from the main page to the details page.

Get Unlimited Access Now

Transcript from the "Showcard Link" Lesson

[00:00:00]
>> Speaker 1: Should we add a link on the showcard to go to the detail page?
>> Brian Holt: Yeah, how did I miss that? Okay, let's go do that real quick. Showcard, I totally forgot this, we're supposed to bring in the link here, import. Yeah because we wanna be able to get to the details page from the search page.

[00:00:25]
>> Brian Holt: From react-router-dom. So import link from react-router-dom. So what we're gonna do here is we're going to wrap the wrapper in a link. To and this is gonna be a template tag /details/props.imdbID.
>> Brian Holt: Yeah, how did I miss that? Okay.
>> Brian Holt: Yeah.
>> Brian Holt: Now this is gonna complain about this imdbID not being there.

[00:01:23] Something that we can refactor this to be. So rather this than being props, colon, and then listing out every single thing possible, we can just say this is a show, right? Because we defined that show type already, and save that.
>> Brian Holt: Cool, and now we have this all being wrapped in a link.

[00:01:45] So if we go back over here, go back.
>> Brian Holt: That's okay, sorry, not quite.
>> Brian Holt: We're gonna actually change link to be wrapper, and remove link here.
>> Brian Holt: Misread my notes. Okay, so now we're gonna have wrapper which is eventually going to be the link tag. So rather than having this being wrapper = styled.div, what we can actually do is we can have styles components wrap link

[00:02:27]
>> Brian Holt: This is gonna yell at us because,
>> Brian Holt: Yeah, we'll talk about that in a second. But you will be getting a flow type error momentarily here. So now if we save that.
>> Brian Holt: Getting closer.
>> Brian Holt: Okay? Now we have add just two more lines of CSS here.

[00:02:52] Gonna say color black to keep that color of that link text, and then we're also gonna have text-decoration is none. And then save that. Come back over here and now everything looks like it's supposed to again. And also, now you can click on things and go to their detail pages.

[00:03:16]
>> Brian Holt: And looks like the Breaking Bad one got pulled down.
>> Brian Holt: But you can go in and you can click into each one of them. I just took the link out of it, and then I put Wrapper to, right? Because that's the property that's gonna be passed down into link.

[00:03:41]
>> Brian Holt: I'll talk about the flow error here in just a second.
>> Brian Holt: Any other questions about that?
>> Brian Holt: And, cool.
>> Brian Holt: So, I just perpetually have issues with styles, components, and flow. So there's a couple ways you can solve this. One of them is you can just say link is any, I think that would work.

[00:04:33]
>> Brian Holt: So this is a good way of doing it. This is just saying like, when the library's typings are not exactly how they should be I'm totally fine just throwing out here and say, you know what, don't check this part. Like I know this is fine, Like I know React router dom is giving me something that's valid React.

[00:04:49] So Cool. Just call that an any. This is called a casting, right? So typically you don't have to worry about typecasting in JavaScript. It's all coerced for you. But in this particular case we're just gonna say, this link is an any thing. I don't think you can actually identify it as a React component.

[00:05:10] I think it's gonna still yell about that. It's gonna say, I don't know what that is, right?
>> Brian Holt: Yeah, it's not gonna like that.
>> Brian Holt: Maybe just don't.
>> Brian Holt: Nope, so we're just going to stick with any. Some day they'll fix this and you can come back and not typecast it.

[00:05:37]
>> Brian Holt: But again, this is just saying, for this particular instance, assume link is an any type. Which is then gonna say, cool, I'm not gonna check this particular typing right here. The other one you can do, which I showed you earlier, is just FlowFixMe. It's just gonna ignore the next line.

[00:05:55] Either one of those is fine. I'm gonna stick with the any for now.
>> Brian Holt: But you're welcome to do it either way.
>> Speaker 1: How do you maintain navigation state throughout the app?
>> Brian Holt: The best answer to that question I think, where possible, you wanna stick it in the URL, right?

[00:06:16] So you have deep links to all the different states of your app, right? So, one thing that we're not doing here that you definitely could do is, when you're typing black right here, you could store that in the URL state. So that someone could copy that link and share it with their friend or they could bookmark it, all that kind of stuff.

[00:06:34] It's all very possible to do with React router. I do not remember how to do it off the top of my head. But it's, you would just interact with the history object and say, push this state onto the app or replace this state, depending on if you wanted to add a new entry for every [COUGH], BLA, and then BLAC, and then BLACK.

[00:06:55] You probably wanna do what's called a replace state there. So that it would just be replacing the state every single time. So yeah, navigation state should typically live in the URL, which means you would be interacting with React Router, to do that. If you don't wanna do that, then you just need to find a common ancestor.

[00:07:15] Our common ancestor would be app, and keeping it in there. Yeah, we don't have any real navigation state, besides the search term, so.
>> Speaker 1: But this person's saying, what order do life cycle methods execute when you have nesting components?
>> Brian Holt: Like what happens first, the children or the parents' components?

[00:07:39] The real answer to that question is you don't have to care. [LAUGH] You can think of each component more or less as an island. Because they really shouldn't be interacting with each other in terms of their lifecycle methods. That's kind of a dodgy answer, and it's also something that's changing because right now we're on a architecture of React called Stack, the Stack architecture.

[00:08:06] This is as of 15.5 and previous, with React 16, we're moving to something called the Fiber architecture. Which is going to change totally the way that it is a complete rewrite of React. However, it is totally API compatible so there shouldn't be any breakage between 15.5 to 16.

[00:08:22] They should just migrate the architecture and nothing changes. And with that they're gonna do all sorts of different ways of when and how components are rendering. And so this is a way of me saying that, it doesn't really matter and I also don't know, because it doesn't matter.