Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Route onEnter Event" 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:

Since the App component will be determining which show needs to be passed to the Details component, Brian adds a custom method that will be called by the onEnter event for the detail’s route. This method will get passed a nextState property as well as a replace function that can be used to redirect the user.

Get Unlimited Access Now

Transcript from the "Route onEnter Event" Lesson

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

[00:00:03]
>> Brian Holt: We're gonna make app select, which details to send down which show to send down. Like that feels like the right code path to me, but you're welcome to disagree with me. But I think this is a pretty nice way of doing it. So the first thing is now that app is gonna have a method, we're gonna have to make this not a stateless functional component anymore.

[00:00:25] It does have to be either a create class or a ES6 class, up to you to choose. You can choose either one. I'm okay, I think let's just do create class. I feel like that's the easier one, react.createClass.
>> Brian Holt: This is gonna all get indented a little bit.

[00:00:52] See, put this here.
>> Brian Holt: That's about right. We're gonna say turn this, and this is gonna be a render method.
>> Brian Holt: And I indented too much. There, there, there, okay, so we just converted this to be a React.createClass. Again, you can use ES6 here. You need one of the two, though.

[00:01:43]
>> Brian Holt: And so now that we've done that we're going to give it an assigned show method, and it takes in the next state and replace.
>> Brian Holt: And then, what we're going to do here on our route on details, were gonna give it an onEnter method, onEnter, and it's gonna be this.assignShow.

[00:02:23]
>> Brian Holt: So every time this route goes to enter, as every time the router goes to enter this particular route, it's gonna run this onEnter method. Now the advantage here is, notice we're getting nextState? We get to manipulate this before it get's sent down to the route, which is kind of cool, right?

[00:02:39] So what we're going to do is like while it's in transit to the details route, we're just like, hey, here's a tag along show that you just pass that down on tp the route too.
>> Brian Holt: And don't follow my notes here, because I've recently discovered that there is a bug here.

[00:02:54] So we have to be a little bit more clever than my notes are. So, I had to remember, this is programming on the fly. Okay, so basically we're gonna have an ID, which is gonna be the IMDB ID. And we're going to match that to the particular route.

[00:03:22] So what we're gonna do here is were gonna say constshow = shows.filter And then we're gonna have to give that a method, and that's gonna be show, and we're gonna return, Gonna return show.imdbID. Let me remember how that looks.
>> Speaker 2: [INAUDIBLE] ID capitalized.
>> Brian Holt: Capitalized, okay. So this has to be capitalized, ===nextState.ID, bless you.

[00:04:08] Okay, we're gonna have to check to make sure that this is correct, but basically we're getting an IMD, a show, sorry we're getting next state, right, and the next state already has ID and ID's coming from here, right? So from whatever the URL says we're going to.
>> Brian Holt: And so we're just gonna do a quick check to see if the IMDB ID for one of these shows is equal to the show that we're looking for, right?

[00:04:44] So ideally this should filter out every show in shows that does not have the same IMDB ID, so ideally, this will be an array of one after we're done, right. So here we're gonna ask. Actually this is gonna be array, just let's call it a show array, just to be very clear that this is actually an array.

[00:05:08] I'm gonna say if (showArray.length < 1). That means we've gave it a show ID that doesn't exist, right? So we're gonna use this replace method here. Because we can't display details for a show that we don't have, right? So we're gonna say, return replace('/'), right? So basically this says, hey, if there's no shows, just send them back to the homepage.

[00:05:35] Typically, you'd send them a 404 page, but we're not doing 404s here. We're just gonna send them back to the homepage, if we can't find the show they're looking for. Otherwise, we're gonna just do an Object.assign(next_state), nextState.params, show. And then here is going to return next state. Okay so object.assign, some of you might've seen this before, or you might've also seen underscored out of sign if you use low dash or underscore very much.

[00:06:11] Basic just here is, I have two objects, I want to take all of the properties in show and put them into next date, nextState.params actually. Right, so if I have
>> Brian Holt: Right, so I need to do show array 0. Thank you, because now we can be definitely sure at least one show matched it.

[00:06:38] It should be exactly one show, right? But if there are multiple shows that matches, it's just gonna pick the first one.
>> Brian Holt: And then we're gonna to pop the top. So, I've just decided, does that makes sense what's going on there. So maybe just a very brief demo.

[00:07:03] If I have var X equals { y: 1, z: 2}, right, and I have var, I dunno, w = { a: 2, b: 3} and Y1 or Y5. And then if I do object.assign, X,W, if I do console.log X here, X is gonna be y5, and then it's going to be z2 and a2 and b3, right, so it's gonna basically go.

[00:08:07] It goes right to left, and it says okay notice that these both have Y. So this one's Y wins, but it's actually modifying X. But that's kinda the gist of what objects assigned does for you, it's basically merging these two objects together in a useful way. Yeah, question?

[00:08:23]
>> Speaker 2: Question is what is on inter for the route.
>> Brian Holt: On enter is just going to get run every single time this route, it's transitioned to this route whether that's the first time or like you're on search and you enter details, right, that's the basic gist of any time that it's entering the route that math is gonna get run.

[00:08:41]
>> Speaker 2: And then they're asking what is nextState.
>> Brian Holt: NextState is going to be the params that are gonna be passed down to that particular route. So in this particular case we have this ID, right, so that's going to be what's in the nextState in this particular case right.

[00:08:59] But anything else that was being passed down to details would be in nextState. So it should just be one object of ID, and that should be about it. Other questions? Any question about objects assigned before I delete this?
>> Brian Holt: Cool, make sense? ES6, so you're welcome to go ahead and use that in your every day JavaScript programming.

[00:09:31] Okay, very useful, I use it all the time everywhere.
>> Brian Holt: All right, let's go make sure this actually works now, since I programmed this on the fly.
>> Brian Holt: Let's go to Details.jsx. This is a good tangent to go on really quick here. This is a personal, Brian Holt thing, but I noticed that many people in the React community do the similar things that I do, just the way I organize my React components, because your reactions are going to end up having a ton of methods.

[00:10:16] The very first thing I always put is get initial state. So I can always at the very top of my method see where the initial states coming from, and then the very bottom method is always render, so that I can always scroll down to the bottom, cuz your render methods usually end up being sometimes fairly large.

[00:10:33] Beneath get initial state I'll put what are called the lifecycle methods, like component will mount, component did mount, component will unmount. We'll talk about that a little bit later in the class. And then under between render and all the life cycle methods, I'll put all like my personal methods, right?

[00:10:50] Like the handle search term event would be an example of that or a sign show as well. That's kind of a life cycle one, but anything that's a, yeah, some sort of like personal one that I'm using. I'm creating. I'll put that kinda there in the middle as well.

[00:11:08] There's no requirement around that I just find it useful for code organization for react, and I notice a bunch of other people are relatively similar in that. Okay, so go ahead.
>> Speaker 2: We do have a couple questions. So is this the same object that we saw when were using the pre-code wrapping?

[00:11:30] Is that the state or the props object?
>> Brian Holt: Props. It's a propped object. We have no state here yet, so.
>> Speaker 2: And then what is the value of replace?
>> Brian Holt: Replace is a function, that's worth mentioning.
>> Speaker 2: Yeah, and where does it come from, as a follow-up question?

[00:11:45]
>> Brian Holt: It comes from react-router. So onEnter, that's specific to react-router, and it just passes these props in. It replaces a method coming from react-router. It says, hey I actually don't want to go into this route, I want to go somewhere else. In this particular case, we're using it because we don't want to enter the route if we don't have the details to display.