title: Nested comments in Reactjs
body: <p>I have the following json:</p>
  
  <pre><code>{  
    "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":[  
  
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
  </code></pre>
  
  <p>As you can see, some of the comments contain a <code>children: []</code> of comments. I need to create nested comments in Reactjs based on this key.</p>
  
  <p>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.</p>
  
  <p>Any one know of any examples, ideas or way of doing this? What I have so far is:</p>
  
  <pre><code>var Comments = React.createClass({
  
    render: function() {
      &lt;div&gt;
        &lt;ul&gt;
          &lt;li&gt;sample&lt;/li&gt;
        &lt;/ul&gt;
        {this.props.children}
      &lt;/div&gt;
    }
  
  });
  </code></pre>
  
  <p>My idea was to loop over the comments and say if they had children just create another comment something like</p>
  
  <pre><code>for (var i = 0; i &lt; comments.length; i++) {
    &lt;Comments&gt;
     if (children) {
       &lt;Comments&gt;&lt;/Comments&gt;
     }
    &lt;/Comments&gt;
  }
  </code></pre>
  
  <p>But this wont really work, I could encapsulate this in a function and say:</p>
  
  <pre><code>comments: function(comments){
      for (var i = 0; i &lt; comments.length; i++) {
        &lt;Comments&gt;
         if (children) {
           this.comments(comments);
         }
        &lt;/Comments&gt;
      }
  }
  </code></pre>
  
  <p>Am I any where near on the right track?</p>