Add ids to data server-side so that keys can be used client-side

Author: zpao

comments.json

@@ -1,9 +1,11 @@
 [
     {
+        "id": 1388534400000,
         "author": "Pete Hunt",
         "text": "Hey there!"
     },
     {
+        "id": 1420070400000,
         "author": "Paul O’Shannessy",
         "text": "React is *great*!"
     }

public/scripts/example.js

@@ -44,6 +44,10 @@ var CommentBox = React.createClass({
   },
   handleCommentSubmit: function(comment) {
     var comments = this.state.data;
+    // Optimistically set an id on the new comment. It will be replaced by an
+    // id generated bu the server. In a production application you would likely
+    // not use Date.now() for this and would have a more robust system in place.
+    comment.id = Date.now();
     var newComments = comments.concat([comment]);
     this.setState({data: newComments});
     $.ajax({
@@ -79,12 +83,9 @@ var CommentBox = React.createClass({
 
 var CommentList = React.createClass({
   render: function() {
-    var commentNodes = this.props.data.map(function(comment, index) {
+    var commentNodes = this.props.data.map(function(comment) {
       return (
-        // `key` is a React-specific concept and is not mandatory for the
-        // purpose of this tutorial. if you're curious, see more here:
-        // http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
-        <Comment author={comment.author} key={index}>
+        <Comment author={comment.author} key={comment.id}>
           {comment.text}
         </Comment>
       );

server.js

@@ -34,7 +34,15 @@ app.get('/api/comments', function(req, res) {
 app.post('/api/comments', function(req, res) {
   fs.readFile(COMMENTS_FILE, function(err, data) {
     var comments = JSON.parse(data);
-    comments.push(req.body);
+    // NOTE: In a real implementation, we would likely rely on a database or
+    // some other approach (e.g. UUIDs) to ensure a globally unique id. We'll
+    // treat Date.now() as unique-enough for our purposes.
+    var newComment = {
+      id: Date.now(),
+      author: req.body.author,
+      text: req.body.text,
+    };
+    comments.push(newComment);
     fs.writeFile(COMMENTS_FILE, JSON.stringify(comments, null, 4), function(err) {
       res.setHeader('Cache-Control', 'no-cache');
       res.json(comments);