Click here to subscribe for more videos like this!
So, let’s create a component to render the post. So, in the home directory under components, I’m going to create a new file and I’m going to call it Post.jsx So, as usual, Post = React.createClass and up here. And what we’re going to do at this point is something a little different. Because each post that’s rendered needs to be rendered with this single post. So, what we’re going to do is we’re going to pass the post id as a property to this function. So, let’s just render, and let postid = and then the post id. This.props.postId Now, something I like to do if we’re passing multiple properties and they’re always passed in as these props and then the name of it. What you can do, you can actually, do this. So, wrap your variables in these curly brackets. And let’s say I also had a post image and whatnot and this will say basically, each one of this is equal to this.props. whatever it is. So, it’s really useful when you’re using multiple ones. And right now, I’m going to console log post.id and then the post id return div There. So, what we’re going to do is we need to map the posts, actually let’s get to that after let’s add a couple tasks in here, so we can actually pull them out and see what we’re working with. Username Nick This is my first post Save. And I should set it to automatically reset this to default empty when we save it. This is another post and then something you’ll really enjoy. So now, I’ve got three posts. And I want to pull them out them down here. So now, to render posts we need to create a couple of methods here in the home file. So, one of them is going to be called getPosts We’re going to pass it an id and the other one is going to be called renderPosts So, what we’re going to do is the get posts is going to return all of the posts because I didn’t need to pass it an id. So, get posts, let’s just return Posts.find fetch and then from here, from render posts, we need to return this.getPosts and then we’re going to map and we’re going to call it post here, and put a little fancy arrow, to an object, we can end that with a semicolon and we’re going to return the post component with the post being sent as an attribute or a property. Let’s end that with a semicolon as well. And what we need to do is in here, in the main body, I’m going to put a line break there, and then I’m going to call this renderPosts Let me have a quick look over here, make sure it’s all good. Looks all good. So let’s go back here and what we need to do, is in post. Ah, see there we go! In post, I’m just returning this, so let’s do class name is card and then in here, let’s go with an h3 tag and here, see this property that’s what I’m expecting to get and so the post is the only property I am setting over here. So, I’m going to in curly brackets here, I’m going to put post.user and then in a paragraph tag, I’m going to put post.content and Save. And so to recap, what we are doing is we are mapping the results of this function to basically this, and this is a new way we can actually pass each item from these results, over as posts to this little block here, which returns the component and we pass the posts through with the property name of posts, so in the post component we can reference the entire post as this from this props. So, we go back here and refresh I’ve got through there and this is not working. What have I done wrong? So, I’m going to pass the id along as a key property here. Posts._id and the reason why it wasn’t rendering the post, which is because I forgot to add the brackets here, so that it runs this function. So, if I save that, go back here and refresh, I’m going to see this. Now, I’m going to, let’s say Add a few of these here. And the great thing about React is when something changes, it scans the document, and you’ll see over here React ids and it performs a div of the current content vs the new content and only rewrites the portions that need to get rewritten. So, it’s a lot faster, that’s why it’s better to scale using React than Blaze. Second post of mine, which will be a bit longer. So, I’m going to style this up a bit, I’ll be right back.
