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.2 Creating the `PostPreviewList` Component

In the world of React, it's common to see a parent component that wraps a list of child components. In this lesson, I'll walk you through the process of creating such a component and explain to you the importance of the "key" attribute.

4.2 Creating the `PostPreviewList` Component

So now I have this really nice PostPreview component. I wanna be able to use it inside of a list, and that's what I'm gonna create in this lesson. So I'm gonna come back into my components. I can probably start to close these down a little bit so it's a little easier to read, same with pages. All right, so I'm gonna create a new component. So I'm gonna create a new folder. And this is going to be my PostPreviewList. And then we'll create a component inside it in a file, PostPreviewList.js. We'll import React from react, and we'll export const. This is gonna be our PostPreviewList. And this is gonna take in some data as well. And we are going to create our arrow function and we're going to return. And in this case, what do we wanna return? Well, I need to be able to get the list of data that's being passed in which is gonna contain a bunch of PostPreview data, if you will. And then I need to transform that into or I need to transform each one of those into a post preview, and then pass it along. So what I'm gonna do is actually outside of my return, I'm going to create a const here, and this is gonna be my postPreviewItems. And now at this point I'm going to assume that we're gonna pass in another property to this component once we get it in there. And this is going to be the props.posts. And once I have those posts, I'm going to run a map function because I want to iterate over all of those. And for each of the post items, which I will call post, I'm simply going to render a new PostPreview. And for each one of those, all I really need to do is I need to pass in that post information. So I'll pass that into this component. But one of the most important things to remember about creating loops like this, or that when you have multiple of the same object kind of being iterated over inside of a component, you need to make sure that you specify a key. So that they are all uniquely identifiable, so that they can be rendered. And if you make changes, then you know which ones you made changes to, so that's very important. So the other thing that I'm gonna put in here is I'm gonna say that all of these posts are gonna have an ID, just like that. So if I save that, now I have this postPreviewItems collection. Now I can save that, and I can come back and copy and simply render that In here. And I'm gonna also make sure I have a fragment in here so that it's only one item being returned, just like that. So now we can save this. So now we have this concept of a PostPreviewList that I'm gonna pass data in that's about that particular post or about all of those posts. And then I'm gonna iterate through them using a map function. And for each of the posts, I'm simply gonna create a new PostPreview components. And I'm going to pass in a key, which is going to uniquely identify this PostPreview component, and then the actual post data. So where is that data gonna come from? Well, ultimately, it's gonna need to come from our home page. So, I'm gonna need to kind of condense all of this information into some data that we're gonna show here in our home page, which is once again gonna come from a database or a web service or from a file or something. And then we're gonna pass all of that data into our PostPreviewList and incorporate that component in here as well. And then we'll have a very nice looking home page and not this kinda big mess that we have here right now. And we're gonna do that process in the next lesson.

Back to the top
Continue watching with Elements