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
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 performa 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.