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

In React, data flows down through components and events bubble up. This architecture can cause problems when two separate routes needs to share data. In this case, it’s best to have the data source exist within a common parent. Then the appropriate data can be passed from the parent to each route that requires it.

Get Unlimited Access Now

Transcript from the "Data Tunneling" Lesson

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

[00:00:04]
>> Brian Holt: So now we're gonna make details actually be more than just a pile of debugging. [LAUGH] So we're gonna actually make it display our show for us.
>> Brian Holt: Yeah, so now we have this problem that we have our shows, and our shows contain all of our data. And if you were getting this from a server instead of just locally loading it, it would be a real problem because both details and search depend on having access to the same data right?

[00:00:45] This is constantly a problem that you're gonna run into react, is I have these two disparate components that don't actually care about each other but they do care about the same amount of data or the same pieces of data. So you have a couple options, I mean the most naive and worst way to handle it is that you would have both components Ajax requested the data, right?

[00:01:03] That makes zero sense because from the time from search to details, it's a horrible idea, because I'm making two Ajax requests and when I really only need to make one. So our other option is we push the shows ups to the most common ancestor. In this particular case that would be the entire app in general, and then via props we'd pass it down to both of them.

[00:01:24] So that's what we're gonna do right now.
>> Brian Holt: This is called the data tunneling problem and it's prevalent everywhere in react to be totally honest.
>> Brian Holt: So, let's go ahead and move this from search, which is where we have data here. We're actually gonna refactor this and so it goes up into clientapp,jsx.

[00:01:52] So let's go to clientapp.jsx and we're going to require data in here. So we're gonna say, actually it's going to bring out shows and say, require../ public/data, and then we're going to do here is we're going to go to search. This one right here I'm gonna pass it down, so I wanna say shows= shows.

[00:02:21] So now we're taking shows from up here and we're passing it down to the route here in search.jsx. So let's go to search now.
>> Brian Holt: Well, let me make sure that just as recap what I did here. I have shows right here, and I'm I'm passing it down right there.

[00:02:46] Okay, now got to search.jsx, get rid of this line right here.
>> Brian Holt: Okay, and now instead of saying, where is it? Data.shows, what we're gonna say now is we're gonna say, this.props.shows. Does that makes sense? So now we're pulling it in from the properties rather than just locally requiring it.

[00:03:14] Again I'll, yeah, go ahead.
>> Speaker 2: Just, which line did you delete again?
>> Brian Holt: Just the require up here.
>> Speaker 2: Okay.
>> Brian Holt: Your linter will yell at you if you don't delete it so. Either it's me yelling at you or the linter, and you can pick your battle. You can probably beat me, I don't know if you can beat the linter.

[00:03:30] [LAUGH]
>> Brian Holt: Okay, and then we changed this right here to be this.props.shows instead of data.shows.
>> Brian Holt: Now, the alarm should be going off in your head right now. It's like I'm referencing something else in props, if I don't change something, then the linter is gonna yell at me.

[00:03:52] So now you need to add something, we need to add prop types to this. And because this is create class way of doing it, we can actually just put a prop type straight in here. So I'm gonna put it here and get initial state, propTypes.
>> Brian Holt: And what I'm gonna do up here is, I'm gonna say const.

[00:04:19]
>> Brian Holt: I think I'm gonna pull out array of, let me make sure. Yep, I'm gonna pull out array of, and I'm gonna pull out object. And then I'm gonna say that equals react.proptypes.
>> Brian Holt: And I'm gonna say shows is an array of object.
>> Brian Holt: That's another really nice feature of the create class way of doing components, is your prop types just live in the component themselves.

[00:05:03] That doesn't work for stateless functional components and it also doesn't work for ES6 classes. We have to do that other methodology of words underneath, right.
>> Brian Holt: Great, so let's go make sure that we didn't break what we just did. So come back over here and look at the search page.

[00:05:36]
>> Brian Holt: And everything looks, and yeah make sure my linter is not yelling at me. Linter's not yelling and the still works as we expect, so we've successfully refactored that.
>> Brian Holt: Questions about that?
>> Brian Holt: So most people feel refactoring okay? Okay cool, seeing mostly head nods, only a couple middle fingers.

[00:06:03]
>> Speaker 2: [LAUGH]
>> Brian Holt: Okay so now it's really cool about this is if we go back here to clientapp.jsx. Now we have, shows available here, so now we can actually use that to pass information into details as well. So here's a design, [COUGH] excuse me, not necessarily design, but an architecture question that you need to answer yourself.

[00:06:36] We have details, or details path, it only cares about one movie at a time right? It only cares about one show that we're passing in it, and it doesn't care about any of the other shows at any given time. So the question is, how are we going to pass shows in from the router into the to the route?

[00:06:55] And there are several correct answers to this question. You could pass all shows into every detail call, and then have detail select itself, which show that it wants to display, right. So you pass in the ID and you'd also pass in all of the shows and have details make that decision, that might be a correct use case for you.

[00:07:17] Maybe you need to show related movies and you need a bunch of movies all at once, that's an acceptable decision.
>> Sneezing Student: [SOUND]
>> Brian Holt: Bless you. Another way to do this is, you could have a method here on the app, and you could have the child's component say I have this ID, please give me back your correct movie.

[00:07:37] And then the parent components say okay here's the correct movie you're looking for. So now the child only has to worry about calling a function and not necessarily which movie it necessarily has, also a valid decision. I'm gonna take a different route. But a question, yes.
>> Speaker 5: There's a couple even saying that there's an issue that search page stopped working.

[00:07:59] It's just showing the index page.
>> Brian Holt: You might have, you broke it. [LAUGH]
>> Speaker 5: But I think you're going to wonder if you have that you have the same problem?
>> Brian Holt: Mine did work. No JK LOL. Can't filter undefined.
>> Speaker 5: Seem that they're saying that the shows not passed down correctly.

[00:08:25]
>> Brian Holt: Well, let's see how we're doing that.
>> Brian Holt: I know what is happening. It's not this.prop.shows, it's this.props.param.shows.
>> Brian Holt: That's the rub.
>> Brian Holt: Which means that your prop types are now gonna blow up, right? It's gonna say hey, you have a bunch of params, so you have to say params is actually an object now.

[00:08:56]
>> Speaker 6: Should propTypes on line 11 be a function rather than a key?
>> Brian Holt: Nope, it should be an object So now you have to get rid of this as well.
>> Brian Holt: Yep, my notes are wrong.
>> Brian Holt: So I fixed all that, that hopefully should, that's still broken, that's ungood.

[00:09:29]
>> Brian Holt: Make sure I did that right, so it should be this.props.params.shows. No, it's route route.
>> Brian Holt: Okay, sorry had to go through all the things in my head real quick. Okay, so now this needs to be route. Okay, A+, fixed, thank you. Debugging on the fly.
>> Brian Holt: So the way I figure this out is cuz I've, one I've done this workshop before.

[00:10:08] [LAUGH] and two, I'm familiar enough with react router or apparently not quite familiar enough, but familiar enough to be able to figure out eventually what I was supposed to do. The way I would look at it is I would introspect the props getting passed down, usually by the react tools, which we'll talk about here in a second.

[00:10:26] But you also could have done that pre-code JSON stringify bit I showed you, and you can see where those shows are actually living, and that's how I would have found the bug. I would definitely use react tools, cuz it's 10 times easier and we're going to talk about it, it might even be next, so buckle up and get really excited.

[00:10:43] That's all I really want to say, okay.
>> Students: [LAUGH]
>> Brian Holt: Okay, disjointed. Let's go back to what we were talking about originally. Thank you for pointing out my,
>> Brian Holt: Interesting choice in bugs, okay.