[tutorial] Use ids in comments data
Paul O’Shannessy committed
Nov 10, 2015 at 16:12 UTC
3bcb0d63f0637b6d0f619d1d04e0536e1f2e02aa
1 file changed
+9
-5
docs/docs/tutorial.md
+9
-5
@@ -292,8 +292,8 @@ So far we've been inserting the comments directly in the source code. Instead, l
292
```javascript
293
// tutorial8.js
294
var data = [
295
- {author: "Pete Hunt", text: "This is one comment"},
296
- {author: "Jordan Walke", text: "This is *another* comment"}
295
+ {id: 1, author: "Pete Hunt", text: "This is one comment"},
296
+ {id: 2, author: "Jordan Walke", text: "This is *another* comment"}
297
];
298
```
299
@@ -325,9 +325,9 @@ Now that the data is available in the `CommentList`, let's render the comments d
325
// tutorial10.js
326
var CommentList = React.createClass({
327
render: function() {
328
- var commentNodes = this.props.data.map(function (comment) {
328
+ var commentNodes = this.props.data.map(function(comment) {
329
return (
330
- <Comment author={comment.author}>
330
+ <Comment author={comment.author} key={comment.id}>
331
{comment.text}
332
</Comment>
333
);
@@ -659,7 +659,7 @@ var CommentBox = React.createClass({
659
660
Our application is now feature complete but it feels slow to have to wait for the request to complete before your comment appears in the list. We can optimistically add this comment to the list to make the app feel faster.
661
662
-```javascript{17-19}
662
+```javascript{17-23}
663
// tutorial20.js
664
var CommentBox = React.createClass({
665
loadCommentsFromServer: function() {
@@ -677,6 +677,10 @@ var CommentBox = React.createClass({
677
},
678
handleCommentSubmit: function(comment) {
679
var comments = this.state.data;
680
+ // Optimistically set an id on the new comment. It will be replaced by an
681
+ // id generated by the server. In a production application you would likely
682
+ // not use Date.now() for this and would have a more robust system in place.
683
+ comment.id = Date.now();
684
var newComments = comments.concat([comment]);
685
this.setState({data: newComments});
686
$.ajax({