articles.diff

diff --git a/src/components/Article.js b/src/components/Article.js
new file mode 100644
index 0000000..fef5d8a
--- /dev/null
+++ b/src/components/Article.js
@@ -0,0 +1,55 @@
+import React, { PropTypes, Component } from 'react'
+
+// stateful component (w/ state)
+class Article extends Component {
+  state = {
+    isOpen: false
+  }
+
+  render() {
+    const { article } = this.props;
+    if (!article) return <h3>No article</h3>
+
+    const { title, text, id } = article;
+    const { isOpen } = this.state
+    const textItem= isOpen ? <section>{text}</section> : null
+    return (
+      <div>
+        <h3 onClick = {this.handleClick}>{title}</h3>
+        {textItem}
+      </div>
+    )
+  }
+
+  handleClick = (e) => { // ES7 syntax
+    this.setState({
+      isOpen: !this.state.isOpen
+    })
+  }
+}
+
+// stateless component, ideally! has no state
+// function Article(props) {
+//   const { article } = props;
+//   if (!article) return <h3>No article</h3>
+//
+//   const { title, text, id } = article;
+//   return (
+//     <div>
+//       <h3>{title}</h3>
+//       <section>{text}</section>
+//     </div>
+//   )
+// }
+
+Article.propTypes = { // works in dev mode only
+  // article: PropTypes.object.isRequired // helpful
+  // PropTypes helps React validate props
+  article: PropTypes.shape({
+   title: PropTypes.string.isRequired,
+   text: PropTypes.string,
+   id: PropTypes.number.isRequired
+  }) // helpful
+};
+
+export default Article
diff --git a/src/components/ArticleList.js b/src/components/ArticleList.js
new file mode 100644
index 0000000..9256401
--- /dev/null
+++ b/src/components/ArticleList.js
@@ -0,0 +1,18 @@
+import React, { PropTypes } from 'react'
+import Article from './Article'
+
+function ArticleList(props) {
+  const { articles } = props;
+  const articleItems = articles.map(article => <li key={article.id}><Article article = {article} /></li>);
+  return (
+    <ul>
+      {articleItems}
+    </ul>
+  )
+}
+
+ArticleList.propTypes = {
+  articles: PropTypes.array.isRequired
+};
+
+export default ArticleList