4.4 Passing Data Between Pages
The final piece of the puzzle for converting this template into a React application is to allow the user to click on a post preview and have the navigation take you to a page that has the detail about that post. In this lesson, I'll show you how to do just that.
1.Introduction2 lessons, 05:00
2.Getting Started2 lessons, 11:16
3.Working With a Template6 lessons, 54:13
4.Creating UI Components4 lessons, 22:28
5.Conclusion1 lesson, 00:43
4.4 Passing Data Between Pages
The final piece of the puzzle that I wanna show you when it comes to this particular template is I wanna be able to come to my main page. And I wanna be able to click on some of these links and actually be taken to another page. But not just any other page, I wanna be able to pass some data from this particular component, my post preview component to another page. So that on that other page, I can do something with that information. In this case, the most likely thing that I would do is make a call out to a web service or something, to retrieve the data about that specific post, and then show that post to the end user. And I can do that in a very generic fashion and be able to create a single page and not have to create a page for every single post which is actually quite useful. So let's go through the process of actually defining some unique characteristic about this post preview, and then putting that in a URL and then being navigated to another page to do something with that information. So let's head back over here to our post preview component. And what you're going to see right now is right now the link actually points to the route, and we don't really wanna do that anymore. We wanna make this more dynamic. And the way that we do any sort of dynamic functionality in React is through these curly brackets. Now within here, I wanna define a path just like I've done with all my other links so far. But I wanna make this a little bit more dynamic. So I'm gonna do some string concatenation. So I'm gonna use my backticks and I'm gonna say that I want this to link to /posts/ and then I want to use some sort of unique identifier about this post that we can use to send you off to another URL. And typically that's gonna be some sorta ID or slug or something like that. But right now all I have access to is an ID that I've defined in my sample data so far. So I'm simply going concatenate on here, props.post.id, just like that. So now I can save this and I can come back over here and I can hover over this, see on the bottom right hand side or the bottom left hand side, excuse me, that we are going to navigate to /posts/1 and /posts/2. Now if I click on that, it's gonna take me to that URL. But there's nothing to display yet, cuz we don't have anything handling that URL. So let's fix that. The first thing that I'm gonna do is create a new page. So I'm gonna create a new folder, we're gonna call that Post. And then within there, we're gonna create a new file called Post.js. Once again we're going to import React from react. And then we're going to export a const Post=, and we're gonna need some parameters this time. So we're gonna have our props and then we're going to have our arrow function here which is going to return something to render to the end user. Now I could put something in here to kind of give you some information or maybe a sample post, but it's really not that necessary. What you would typically do here is use your state or maybe your use effect hook like we've done before, to make a call out to some web service and get some additional data and then render some information here. But for this I'm simply going to create an h1, and then within here all I wanna do is render some information that I got from my route parameter. And the way that I get that information is by going into props.match.params., and then the name of whatever the parameter is that I wanna use. And in this case I'm gonna call it id. Now that id has nothing to do with the fact that that's what I'm putting in the URL, it has more to do with what I'm going to define in the route in just a second. So we're just going to say, we'll just leave it as that. That's all we really need. And then we're going to define that route in App.js. Now typically what you would do or what we've done so far is we have just copy and paste it and said I wanna go to posts/, and then whatever that parameter is. Now this is where we're gonna need to match this name that we have in our post here with this ID. So whatever I named this, I have to define in my route with a named parameter which is going to be ;id. Now what I've done before is I've said all right when I hit that, I want to navigate to my Post component. But the problem is I'm gonna save this and I'm gonna show you that this actually isn't going to work. So if I were to hover over this, you can see that I'm gonna go to posts 1, I'm going to tap on that. And I'm gonna get an error unable to read property params of undefined. And that's because when you're trying to pass parameters this way, and you wanna retrieve them through a property as I've defined right here, we have to define this a little bit differently. So I'm going to come back in here and I'm actually going to close off this route. And I'm gonna say, instead of conditionally rendering this component, when I go to this path, I'm gonna say I want to explicitly define a component that's gonna handle this request. And that component that's gonna handle this request is gonna be my Post component. And by doing it this way, I'm now giving access to the parameters that are being passed to me like this. So now if I were to come over here you're gonna see I can see the id is 1. If I come back and refresh my page some times it doesn't load very well, I can click on the second one for Posts 2 and I'm gonna get Posts 2. So really that's the process of being able to take something from a particular component, some information and ID or whatever sort of data you want. And then based on a click using React Router DOM being able to pass that information via some route parameters in the URL to another route and then ultimately get handled by another component.