Create PostList component and add to app

Author: StuartCowley

src/components/App.js

@@ -1,6 +1,6 @@
 import React from "react";
 import "../styles/app.css";
-import Post from "./Post";
+import PostList from "./Postlist";
 
 import placeholderData from "../data/posts.json"
 
@@ -11,12 +11,10 @@ const App = () => {
       <div className="app__foreground-wrap">
         <div className="app__title">Intro to React II</div>
         {
-          // TODO: Send data to Post component and verify it works
-          //   wrap all Posts in a PostList component
           // TODO: Create a Postlist component to wrap all Posts in,
           //   display name of last upvoted post at the top
         }
-        <Post postData={placeholderData[0]} />
+        <PostList posts={placeholderData} />
       </div>
     </div>
   );

src/components/Postlist.js

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import "../styles/postlist.css"
+
+import Post from "./Post";
+
+const PostList = ({ posts }) => {
+  return (
+    <div className="postlist">
+      {posts.map((post) => (
+        <Post key={post.id} postData={post} />
+      ))}
+    </div>
+  );
+};
+
+PostList.propTypes = {
+  posts: PropTypes.arrayOf(
+    PropTypes.shape({
+      author: PropTypes.string,
+      body: PropTypes.string,
+      date: PropTypes.string,
+      isPublished: PropTypes.bool,
+      tags: PropTypes.arrayOf(PropTypes.string),
+      title: PropTypes.string,
+    })
+  ).isRequired,
+};
+
+export default PostList;

src/styles/postlist.css

@@ -0,0 +1,5 @@
+.postlist {
+  padding-left: 24px;
+  padding-right: 24px;  
+  padding-bottom: 24px;
+}