Pass data to Post, and render out

Author: StuartCowley

src/components/App.js

@@ -1,6 +1,8 @@
 import "../styles/app.css";
 import Post from "./Post";
 
+import placeholderData from "../data/posts.json"
+
 const App = () => {
   return (
     <div className="app">
@@ -13,7 +15,7 @@ const App = () => {
           // TODO: Create a Postlist component to wrap all Posts in,
           //   display name of last upvoted post at the top
         }
-        <Post />
+        <Post postData={placeholderData[0]} />
       </div>
     </div>
   );

src/components/Post.js

@@ -1,24 +1,25 @@
 import React from "react";
 
-const Post = (props) => {
+const Post = ({postData}) => {
+  const {title, author, date, isPublished, body, tags} = postData
+
   return (
     <div className="post">
       <div className="post-heading">
         {
-          // TODO: Use data from props to populate title, author, date
-          //   published, body and tags, validate props
-        }
-        <h2>"title"</h2>
-        {
-          // TODO: show post body if isPublished, or 'Coming soon!' if not
+          // TODO: validate props
         }
+        <h2>{title}</h2>
+        {isPublished ? <p>{body}</p> : <p>Coming soon!</p>}
       </div>
-      <div className="post-author">Author: "author"</div>
-      <div className="post-date">Published: "date"</div>
+      <div className="post-author">Author: {author}</div>
+      <div className="post-date">Published: {date}</div>
       <h3>Tags:</h3>
-        {
-          // TODO: Create list of all all provided tags
-        }
+      <ul>
+        {tags.map((tag, index) => (
+          <li key={index}>{tag}</li>
+        ))}
+      </ul>
     </div>
   );
 };