Fix add comment ref error

- Since we create the comment nodeRef in the CommentList component
  We don’t need it to be created during adding a comment.

- We shouldn’t change the props of a react component, It is not
  the best practice, So that this commit creates the nodeRef in the
  render function where it is used instead of the constructor function.

client/app/bundles/comments/components/CommentBox/CommentList/CommentList.jsx

@@ -20,12 +20,6 @@ export default class CommentList extends BaseComponent {
 
   constructor(props, context) {
     super(props, context);
-    this.state = {};
-
-    const { $$comments } = this.props;
-    for (const comment of $$comments) {
-      comment.nodeRef = React.createRef(null);
-    }
 
     _.bindAll(this, 'errorWarning');
   }
@@ -55,24 +49,27 @@ export default class CommentList extends BaseComponent {
 
   render() {
     const { $$comments, cssTransitionGroupClassNames } = this.props;
-    const commentNodes = $$comments.map(($$comment, index) => (
-      // `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
-      <CSSTransition
-        key={$$comment.get('id') || index}
-        nodeRef={$$comment.get('nodeRef')}
-        timeout={500}
-        classNames={cssTransitionGroupClassNames}
-      >
-        <Comment
+    const commentNodes = $$comments.map(($$comment, index) => {
+      const nodeRef = React.createRef(null);
+      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
+        <CSSTransition
           key={$$comment.get('id') || index}
-          author={$$comment.get('author')}
-          text={$$comment.get('text')}
-          ref={$$comment.get('nodeRef')}
-        />
-      </CSSTransition>
-    ));
+          nodeRef={nodeRef}
+          timeout={500}
+          classNames={cssTransitionGroupClassNames}
+        >
+          <Comment
+            key={$$comment.get('id') || index}
+            author={$$comment.get('author')}
+            text={$$comment.get('text')}
+            ref={nodeRef}
+          />
+        </CSSTransition>
+      );
+    });
 
     // For animation with TransitionGroup
     //   https://reactcommunity.org/react-transition-group/transition-group

client/app/bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx

@@ -54,9 +54,7 @@ class SimpleCommentScreen extends BaseComponent {
       .post('comments.json', { comment }, requestConfig)
       .then(() => {
         const { $$comments } = this.state;
-        // comment.nodeRef = React.createRef(null);
-        const commentWithNodeRef = { ...comment, nodeRef: React.createRef(null) };
-        const $$comment = Immutable.fromJS(commentWithNodeRef);
+        const $$comment = Immutable.fromJS(comment);
 
         this.setState({
           $$comments: $$comments.unshift($$comment),