I have the following json:
{
"comments":[
{
"id":1,
"comment_text":"asdasdadasdsadsadadsa",
"author":"adsfasdasdsad",
"post_id":1,
"ancestry":null,
"archived":false,
"created_at":"2014-10-16T23:16:44.173Z",
"updated_at":"2014-10-16T23:16:44.173Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
]
},
{
"id":2,
"comment_text":"idlsfghlskdhvbsldfhjdslifds\nzf\ndsf\nds\nf\ns\nf\ns\nfds\nfsdjghfsdligjhsepfiguhefdliguhefldiughfeliughnfesg\nf\nsg\ns\ng\ns\ndf\nsd\nf\nsdgsofughlefidughls;uhgsuhg.vskjfhglsiuhg.sfv",
"author":"asdsdasdad",
"post_id":1,
"ancestry":null,
"archived":false,
"created_at":"2014-10-16T23:17:02.270Z",
"updated_at":"2014-10-16T23:17:02.270Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
{
"id":3,
"comment_text":"fdsfdsfdsfsdfsfsdf",
"author":"sdfdsfdsfdsfds",
"post_id":1,
"ancestry":"2",
"archived":false,
"created_at":"2014-11-28T17:39:47.059Z",
"updated_at":"2014-11-28T17:39:47.059Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
{
"id":4,
"comment_text":"fdsfdsfdsdsfdsfds",
"author":"sdfsdfdsfsdfdsfds",
"post_id":1,
"ancestry":"2/3",
"archived":false,
"created_at":"2014-11-28T17:39:53.049Z",
"updated_at":"2014-11-28T17:39:53.049Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
{
"id":5,
"comment_text":"sdfdsfdsfdsfdssdfsdfdsfdsfdsfds",
"author":"sdfsdfdsfdsfdsf",
"post_id":1,
"ancestry":"2/3/4",
"archived":false,
"created_at":"2014-11-28T17:40:02.032Z",
"updated_at":"2014-11-28T17:40:02.032Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
]
}
]
}
]
}
]
}
]
}
As you can see, some of the comments contain a children: []
of comments. I need to create nested comments in Reactjs based on this key.
I was able to do this in a very messy jquery way, but with React I want to move away from jquery and create a pure react base of nested comments.
Any one know of any examples, ideas or way of doing this? What I have so far is:
var Comments = React.createClass({
render: function() {
<div>
<ul>
<li>sample</li>
</ul>
{this.props.children}
</div>
}
});
My idea was to loop over the comments and say if they had children just create another comment something like
for (var i = 0; i < comments.length; i++) {
<Comments>
if (children) {
<Comments></Comments>
}
</Comments>
}
But this wont really work, I could encapsulate this in a function and say:
comments: function(comments){
for (var i = 0; i < comments.length; i++) {
<Comments>
if (children) {
this.comments(comments);
}
</Comments>
}
}
Am I any where near on the right track?
You need two components: Comments and Comment.
Comment = React.createClass({
render: function(){
var comment = this.props.comment;
return <div>
<p>{comment.author} says {comment.comment_text}</p>
<Comments comments={comment.children} />
</div>
}
});
Comments = React.createClass({
render: function(){
return <div>
{this.props.comments.map(function(comment){
return <Comment key={comment.id} comment={comment} />
})
</div>
}
});
The Comment renders Comments, which in turn can render Comment nodes, etc. This recursively builds the comment structure.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With