L3.1 Using state.

comments.css

@@ -8,6 +8,14 @@ body {
   display: none;
 }
 
+.comment-box button {
+  background-color: #47696f;
+  border-radius: 0.5em 1ex;
+  border-width: 0;
+  color: inherit;
+  text-transform: uppercase;
+}
+
 .comment-count,
 .comment-footer-delete {
   background-color: #639ca1;

src/comments.js

@@ -4,6 +4,10 @@ Good practices:
 - prefix non-React method names by an "_"
 - pass a "key" attribute to elements in a loop
 
+State
+- direct reads, write through setState()
+- declare initial state in constructo()
+
 JSX:
 - "className", not "class"
 - knows how to render an array of JSX elements, not just one.
@@ -33,6 +37,13 @@ class Comment extends React.Component {
 }
 
 class CommentBox extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      showComments: false
+    };
+  }
+
   _getComments() {
     return commentList.map((comment) => {
       return (<Comment
@@ -52,15 +63,25 @@ class CommentBox extends React.Component {
     return `${commentCount} comments`;
   }
 
+  _handleClick() {
+    this.setState({
+      showComments: !this.state.showComments
+    });
+  }
+
   render() {
     const comments = this._getComments();
+    let buttonText = "Show comments";
+    let commentNodes;
+    if (this.state.showComments) {
+      commentNodes = <div className="comment-list">{comments}</div>;
+      buttonText = "Hide comments";
+    }
     return (
       <div className="comment-box">
-        <h3>Comments</h3>
+        <button onClick={this._handleClick.bind(this)}>{buttonText}</button>
         <h4 className="comment-count">{this._getCommentsTitle(comments.length)}</h4>
-        <div className="comment-list">
-          {comments}
-        </div>
+        {commentNodes}
       </div>
     );
   }