how to render child components in react.js recursively

Question

I wanted to recursively add a react component from within its own component. I saw this example of a tree component which was mapping through the child TreeNodes and adding child nodes in the same way. Unfortunately it doesn't work at all for me. The idea was to have a simple comment component, and the replies would reuse the same component.

var Comment = React.createClass({   render: function() {         return (         <div className="comment">            {/* text and author */}           <div className="comment-text">             <span className="author">{this.props.author}</span>                      <span className="body" dangerouslySetInnerHTML={{__html: this.props.body}} />           </div>            {/* replies */}           <div className="replies">            {              this.props.replies.map(function(reply) {                <Comment body={reply.body} author={reply.author} />              }.bind(this))           }           </div>        </div>     );   } }); 

I get the following error message:

Uncaught TypeError: Failed to construct 'Comment': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

here is an example of the JSON data passed to the component.

{ "author" : "Some user",   "body" : "<div>Great work</div>",   "replies" : [ { "author" : "A user replying",         "body" : "<div Yes it was great work</div>"       },       { "author" : "Another user replying",         "body" : "<div It really was great work!</div>"       }     ] } 

Answer 1

Here's an alternative in ES6:

import React, { Component, PropTypes } from 'react'  export default class Comments extends Component {    render() {      const { children } = this.props      return (       <div className="comments">         {children.map(comment =>           <div key={comment.id} className="comment">             <span>{comment.content}</span>             {comment.children && <Comments children={comment.children}/>}           </div>         )}       </div>     )    }  }  Comments.propTypes = {   children: PropTypes.array.isRequired } 

And is some other component:

<Comments children={post.comments}/>