var CommentApp = React.createClass({ getInitialState: function() { return { comments: [] } }, render: function() { return ( <div> <NewComment onAction={this.onAction} /> <CommentList comments={this.state.comments} /> </div> ); }, onAction: function(payload){ switch(payload.action){ case "SUBMIT_NEW_COMMENT": this._onSubmitNewComment(payload.value); break; default: console.warn("Action: '" + payload.action + "' was not handled."); } }, _onSubmitNewComment: function(comment) { var comments = this.state.comments; comments.push(comment); this.setState({ comments: comments }); } }); var NewComment = React.createClass({ getInitialState: function(){ return { comment: "", author: "" }; }, render: function() { return ( <div> <input ref="author" placeholder="Author" value={this.state.author} onChange={this._onAuthorChange}/> <input ref="comment" placeholder="Comment" value={this.state.comment} onChange={this._onCommentChange}/> <button onClick={this._onCommentSubmit}>Submit</button> </div> ); }, _onCommentChange: function() { this.setState({ comment: React.findDOMNode(this.refs.comment).value }); }, _onAuthorChange: function() { this.setState({ author: React.findDOMNode(this.refs.author).value }); }, _onCommentSubmit: function() { var payload = { action: "SUBMIT_NEW_COMMENT", value: { comment: this.state.comment, author: this.state.author } } this.props.onAction(payload); this.setState(this.getInitialState()) } }); var CommentList = React.createClass({ render: function(){ var listNodes = this.props.comments.map(function(comment){ return ( <div> <h3>{comment.author}</h3> <p>{comment.comment}</p> </div> ); }); return ( <div> {listNodes} </div> ); } }); React.render(<CommentApp name="World" />, document.getElementById('comment-app'));
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script> <div id="comment-app"> <!-- This element's contents will be replaced with your component. --> </div>