CommentBox

App.jsx

import React, { Component, PropType } from 'react';
import CommentList from './CommentList';
import CommentForm from './CommentForm';
import comments from './Comments';

export default class App extends Component {
  render() {
  return (
    <div>
      <h1>Comments</h1>
      <CommentList data={comments} />
      <CommentForm />
    </div>
    )
  }
}

Comment.jsx

import React, { Component } from 'react';

export default class Comment extends Component {
  render() {
    const { author, text } = this.props;
    return (
      <div>
        <h2>{author}</h2>
        {text}
      </div>
      );
  }
}

CommentList.jsx

import React, { Component, PropTypes } from 'react';
import Comment from './Comment';

export default class CommentList extends Component {
  render() {
    const { author, text } = this.props;
    return (
      <div>
      {this.props.data.map((comments) => {
        <Comment author={comments.author}>{comments.text}</Comment>
      })}
      </div>
      );
  }
}

CommentList.propTypes = {
  data: PropTypes.array.isRequired,
  author: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired
};

comments.js

export default [
  {author: "Pete Hunt", text: "this is a comment"},
  {author: "Jordan Walke", text: "this is another comment"}
];