Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.6 hours
Building a react website with a pre built template 400x277
  • Overview
  • Transcript

4.3 Rendering Sample Data in a List

Since you're working from a template, most of the time you will be using either some Lorem Ipsum text or some pre-built data. Nonetheless, you will need to know where to put the code that will retrieve that real data when the time comes. Until then, I'll show you how to use two different React hooks to retrieve some boilerplate text to display on the Home page.

4.3 Rendering Sample Data in a List

Now we're actually gonna start to use the components that we've been creating to clean up the homepage and make this look a little bit nicer. So really at this point, what I want to do is I want to take everything inside this container, out. So I'm gonna take this all the way down to this final div over here, and actually delete all of that. And now I want to be able to kind of add in just what we need to render our components and our data. So how did that work? So what are we gonna put in here? Well, what we're gonna do is we're going to add in our post preview list. And we're gonna need to pass some data into here and what are we passing in, we're passing in our posts. So what I'd like to be able to do is I'd like to basically just be able to set this equal to post, like this and then just have it render. But the problem is, what are posts? Where is that data coming from? Well, once again, it's gonna come from any number of different sources, but for our purposes here, I basically just wanna fudge this a little bit and add in some data. So right now it's got a lot of different posts in here. It's actually got four. So what I'm gonna do is I'm actually just gonna take the data from two of them and just kinda stub this out a little bit so you can see how it would work. So in order for us to actually retrieve this data in a real world situation, we would wanna bring in some ways to actually use some state in our component. In our page, I wanna have some state that's gonna contain all of the posts. And then I wanna be able to render that when things change. And the way that I like to do that is by using hooks in React. And so I'm gonna use two different hooks. So I'm gonna come up here to my import statement and I'm going to bring in useState and I'm also going to bring in useEffect. Now what this is going to allow us to do is create state in our component. So I can save some data in the state of this component. And then I can do some rendering, and I can handle when the data changes, I can then re-render it as I need to. So I'm gonna start by creating a const. We're outside of our return here, and I'm going to create a posts, which is going to ultimately get rendered here. And this is gonna be part of our state, and then I'm gonna call my set function setPosts, which we're going to use in just a second. And I'm gonna set that equal to useState. And I'm gonna pass in a default of an empty array or an empty list. So at this point, there's no data in posts. So it's gonna mean that this is gonna be empty. And then I wanna be able to render this, and pay attention to when it changes. But if actually I were to save this right now and come back over here, you're gonna see for Clean Blog there's no data. And why is that? Well, once again, that's because this is empty right now, there's no data for us to actually render. So what I wanna do is kinda simulate the process of retrieving that data, getting it back, and then using the setPosts function to populate this post variable that's ultimately gonna get rendered here. So I'm going to drop down a couple of lines and I'm going to use my useEffect hook. And then in here, I'm gonna create a function that's going to fire when the component is initially rendered, when the data that it's watching gets updated, and all sorts of things like that. So I'm simply gonna come in here and I'm going to use my setPosts function. And I'm gonna set it equal to a list of data. And I've already kind of typed this out so you don't have to watch me do it. But basically I took data from the first two of the posts and just kinda put them in here. So each one has an ID, ID 1, 2, it's got title, subtitle, it's got author and it's got publication date simply copy and pasted from the data that we had before. And then I'm simply going to specify no dependency here. So it's gonna render one time and one time only. And then it's going to just display data basically on create here. So if I save that, and come back over here, you're gonna see that my data is showing up here. And it does look like I might have removed too much. So just to double check here, let's go back into our index page and let's bring this open in Visual Studio and I believe I probably removed an extra yes. So in here now, I need to make sure that I have these two classes inside of my container, so we'll copy that. And then we'll come back over into here. So then for our container, we'll paste that in. The world of copy and paste when you're doing these can be a little unforgiving. So every once in a while after you have made some changes, all you really need to do is come back through and just re-render your page and make sure that everything is looking good as it was in your template. And then every once in a while you'll miss something. And that's pretty normal, but it's not a big deal. So I'll go ahead and save that and come back over. And now we're looking a little bit more like we were before. So I see a little bit of spacing issue in here so I can go ahead and fix that. That's not a big deal. So all we need to do is go back into our post preview here and I can see that posted by, I need to put a space in here like this for each one of those. And we'll go ahead and save that. Come back over, it re-renders and now we have some space in here. So now we are starting to actually look like our template and we're in kinda full React mode. So if am on my home page like this, I can come in here and I can click on one of these. And it's gonna take me to a blank page right now because I don't really have a post.html. So that's why that's not gonna render right now. But I think for the most part here, we're doing pretty well. We do wanna be able to see that eventually. So, I'm gonna need to change this as well. So I'll change this to a link like this. And these links are really nice because they basically function exactly like anchor tags would. They get rendered as anchor tags, so that's actually really nice. So that I can do all the same kind of body of the anchor like I would normally like this right here, and I can still contain all of that inside of a link. And for right now we'll just say this is going to, and we'll set that equal to the root for now. And then we'll play with that a little bit in the next lesson. But I think we're starting to actually look pretty good. So I can see my Home, I can see my About, I can see my Contact. If I'm at Home, I can click on one of these and it's not actually gonna go anywhere, which is good. Which means that it's actually routing back to the homepage. So I think we're to the point now where we can start to modify this a little bit, so that when I click on one of these links, it will take me to another page that will be basically my post page. And we'll just kinda stub out a little bit of information cuz I don't wanna fill all the all of that data out. So I'll leave that as a lesson for you, or as another project for you. But I'll just kinda show you how we can pass data from one page via a link when I click on this to another page so you can see what I've clicked on.

Back to the top