A box for comments

I made this as a practice application to learn React. It is simply a box where someone can enter their name and a comment and submit it, and display other comments. This animated GIF illustrates what it looks like:

Note: Please don't be too critical of the looks, I haven't spent a lot of time styling it with CSS. Also those small vertical lines shown with the typing were introduced by imgur when I uploaded the gif to it, those don't appear on the actual page.

There is not a data persistence server/layer to speak of, as it is not meant to be actually deployed, so I simply keep the data into a regular array of objects, like so:

var comments = [
  {
    id: 1,
    author: "John Q. Commenter",
    text: "This is the first comment.",
    timestamp: new Date()
  },
  {
    id: 2,
    author: "Jane A. Opinionated",
    text: "This is the second comment.",
    timestamp: new Date()
  },
  /* Test for empty comment */
  {
    id: 3
  }
]

I went with a Component/Container design approach, where the container is responsible for the business logic, and the container is only responsible for rendering the appearance of the objects on the page.

There are 4 components together in this hierarchy:

CommentBox
|- CommentList
   |- Comment
|- CommentForm

The data flow for comments is essentially: CommentForm -> comments (array) -> CommentList -> Comment.

I will focus on the React files only, but if you are curious about the rest you can look at the repository on GitHub.

Note that I left out the import React from 'react' and export default lines because every file begins and ends with those, respectively.

index.jsx

This is the entry point:

import CommentBox from './containers/CommentBoxContainer'

class App extends React.Component {
  render() {
    return (
      
        
      

    )
  }
}

ReactDOM.render(
  ,
  document.getElementById('app')
)

CommentBox

This component is meant to hold all the other elements together:

```
import CommentL

I see no particularly compelling reason to make CommentBoxContainer a class instead of a Stateless Functional Component, like most of the rest of the items here.

CommentContainer also could be a SFC.

In CommentListContainer, I would set:

this.state = { data: this.props.data || [], numComments: this.props.data && this.props.data.length || 0 }

However, that is probably likely exactly the same as setting the data initially in componentDidMount, I've just not currently used it like that, as all of my components tend to not hang around, so constructor is always called right before componentDidMount().

I'd also consider moving the poll query up to CommentBox, considering that's where you start using the data var in your chain.

I also see that CommentBox has a required prop for data, but you're not actually using it. So that can probably be removed.

I'm a bit confused by the decision to have a separate CommentForm and CommentFormContainer -- I mean, I guess if you were planning to support getting data from some source other than React State, that might make sense.. but otherwise, it seems a bit convoluted to have a component and then have it's state kept in another component.

StackExchange Code Review Q#145056, answer score: 4