Skip to content

Instantly share code, notes, and snippets.

@uberllama
Created January 11, 2015 21:57
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save uberllama/8f1f24048f8052ee6725 to your computer and use it in GitHub Desktop.
Nested React components
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>
);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment