Add last upvoted function to PostList

Author: StuartCowley

src/components/Post.js

@@ -2,12 +2,13 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import "../styles/post.css";
 
-const Post = ({postData}) => {
+const Post = ({postData, handleUpvote}) => {
   const {title, author, date, isPublished, body, tags} = postData;
   const [count, setCount] = useState(0);
 
-  const handleClick = () => {
+  const handleClick = (event) => {
     setCount(prev => prev + 1)
+    handleUpvote(event.target.value)
   }
 
   return (
@@ -18,7 +19,7 @@ const Post = ({postData}) => {
       </div>
       <div className="post-counter">
         <span>Upvotes: {count}</span>
-        <button onClick={handleClick} type="button">Upvote this</button>
+        <button onClick={handleClick} value={title} type="button">Upvote this</button>
       </div>
       <div className="post-author">Author: {author}</div>
       <div className="post-date">Published: {date}</div>
@@ -40,7 +41,8 @@ Post.propTypes = {
     isPublished: PropTypes.bool,
     tags: PropTypes.arrayOf(PropTypes.string),
     title: PropTypes.string,
-  }).isRequired
+  }).isRequired,
+  handleUpvote: PropTypes.func.isRequired
 }
 
 export default Post;

src/components/Postlist.js

@@ -1,15 +1,22 @@
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 
 import "../styles/postlist.css"
 
 import Post from "./Post";
 
 const PostList = ({ posts }) => {
+  const [lastUpvoted, setLastUpvoted] = useState("");
+
+  const handleUpvote = (title) => {
+    setLastUpvoted(title);
+  }
+
   return (
     <div className="postlist">
+      {lastUpvoted && <div className="postlist__last-upvoted">Last upvoted post: {lastUpvoted}</div>}
       {posts.map((post) => (
-        <Post key={post.id} postData={post} />
+        <Post key={post.id} postData={post} handleUpvote={handleUpvote} />
       ))}
     </div>
   );