I have the following json:

{  
  "ments":[  
    {  
      "id":1,
      "ment_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,
      "ment_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,
          "ment_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,
              "ment_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,
                  "ment_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 ments contain a children: [] of ments. I need to create nested ments 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 ments.

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 ments and say if they had children just create another ment something like

for (var i = 0; i < ments.length; i++) {
  <Comments>
   if (children) {
     <Comments></Comments>
   }
  </Comments>
}

But this wont really work, I could encapsulate this in a function and say:

ments: function(ments){
    for (var i = 0; i < ments.length; i++) {
      <Comments>
       if (children) {
         thisments(ments);
       }
      </Comments>
    }
}

Am I any where near on the right track?

I have the following json:

{  
  "ments":[  
    {  
      "id":1,
      "ment_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,
      "ment_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,
          "ment_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,
              "ment_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,
                  "ment_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 ments contain a children: [] of ments. I need to create nested ments 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 ments.

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 ments and say if they had children just create another ment something like

for (var i = 0; i < ments.length; i++) {
  <Comments>
   if (children) {
     <Comments></Comments>
   }
  </Comments>
}

But this wont really work, I could encapsulate this in a function and say:

ments: function(ments){
    for (var i = 0; i < ments.length; i++) {
      <Comments>
       if (children) {
         this.ments(ments);
       }
      </Comments>
    }
}

Am I any where near on the right track?

• javascript
• html
• reactjs

2 Answers 2

You need two ponents: Comments and Comment.

Comment = React.createClass({
  render: function(){
    var ment = this.props.ment;
    return <div>
      <p>{ment.author} says {ment.ment_text}</p>
      <Comments ments={ment.children} />
    </div>
  }
});

Comments = React.createClass({
  render: function(){
    return <div>
      {this.props.ments.map(function(ment){
        return <Comment key={ment.id} ment={ment} />
      })
    </div>
  }
});

The Comment renders Comments, which in turn can render Comment nodes, etc. This recursively builds the ment structure.

This is easier to do with just the one ponent if you make it responsible for rendering its own children recursively:

var Comment = React.createClass({
  render() {
    var ment = this.props.ment
    return <div>
      <div dangerouslySetInnerHTML={{__html: ment.ment_text}}/>
      {ment.children.length > 0 && ment.children.map((child) => {
        return <Comment key={child.id} ment={child}/>
      })}
    </div>
  }
})

• Live JS Bin example

If you want to do this without nesting the ponents so you're just rendering a flat list of <Comment>s, you can linearise the tree of ments into a list first, e.g.

function flattenComments(ments, flatComments, level) {
  for (var i = 0, l = ments.length; i < l; i++) {
    var ment = ments[i]
    flatComments.push({ment: ment, level: level})
    if (ment.children.length > 0) {
      flattenComments(ment.children, flatComments, level + 1)
    }
  }
}

var flatComments = []
flattenComments(ments, flatComments, 0)
var renderedComments = flatComments.map((props) => {
  return <Comment {...props}/>
})