Edit in JSFiddle

const shallowCompare = React.addons.shallowCompare;

class CommentBox extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      comments: this.getComments(5)
    };
  }
  
  componentDidUpdate() {
    console.log("comment BOX updated.");
  }
  
  getComments(num) {
    return (new Array(num).fill().map((_, index) => {
      return {
        id: index,
        author: `author-${index}`,
        text: `text-${index}`
      }
    }));
  }
  
  handleClick() {
    this.setState({
      comments: this.getComments(this.state.comments.length  + 1)
    });
  }
  
  render() {
    const commentNodes = this.state.comments.map((commentData) => 
      <Comment key={commentData.id} { ...commentData } />
    );
    return (
      <div className="commentBox">
        <div className="commentList">
          { commentNodes }
        </div>
        <button onClick={this.handleClick}>
          Add new comment
        </button>
      </div>
    );
  }
}

class Comment extends React.Component {
  componentDidUpdate() {
    console.log("comment updated.");
  }
  
  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }
  
  render() {
    let {author, text} = this.props;
    return (
      <div className="comment">
        {author}: {text}
      </div>
    );
  }
}

ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);