Nested React components

gistfile1.js

var PostExpanded = React.createClass({
  propTypes: {
    post:     React.PropTypes.object,
    comments: React.PropTypes.array,
    users:    React.PropTypes.array
  },

  render: function() {
    return (
      <div>
        <h1 className="page-header">{this.props.post.title}</h1>
        <Post {...this.props.post} />
        <h2 className="sub-header">Comments</h2>
        <CommentList comments={this.props.comments} users={this.props.users} />
      </div>
    );
  }
});

var Post = React.createClass({
  propTypes: {
    id:         React.PropTypes.number,
    body:       React.PropTypes.string
  },

  render: function() {
    return (
      <div>
        {this.props.body}
      </div>
    );
  }
});

var CommentList = React.createClass({
  propTypes: {
    comments: React.PropTypes.array,
    users:    React.PropTypes.array
  },

  render: function() {
    var self = this;
    var commentListItems = this.props.comments.map(function(comment) {
      var user = _.find(self.props.users, { id: comment.userId });
      return <Comment key={comment.id} {...comment} user={user} />;
    });

    return (
      <ul>
        {commentListItems}
      </ul>
    );
  }
});

var Comment = React.createClass({
  propTypes: {
    id:   React.PropTypes.number,
    body: React.PropTypes.string,
    user: React.PropTypes.object
  },

  render: function() {
    return (
      <li>
        <p>{this.props.body}</p>
      - {this.props.user.name}
      </li>
    );
  }
});