Skip to content

Instantly share code, notes, and snippets.

@kellenmace
Last active February 27, 2019 14:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kellenmace/4bccdc966b50123d95170596ab3de97c to your computer and use it in GitHub Desktop.
Save kellenmace/4bccdc966b50123d95170596ab3de97c to your computer and use it in GitHub Desktop.
import React from 'react';
// Helper function for formatting dates.
const formatDate = date => new Date( date ).toDateString();
const PostCard = ({post}) => {
const { postId, title, date, author, featuredImage } = post;
const { name: authorName } = author;
return (
<div key={postId} className="post-card">
{ featuredImage && // If a featured image exists, display it.
<img src={featuredImage.sourceUrl} alt={featuredImage.altText} className="post-card__image" />
}
<h3 className="post-card__heading">{title}</h3>
<span className="post-card__detail">
<span className="post-card__label">Date:</span> {formatDate(date)}
</span>
<span className="post-card__detail">
<span className="post-card__label">Author:</span> {authorName}
</span>
</div>
);
};
export default PostCard;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment