Instantly share code, notes, and snippets.

@kellenmace /PostCard.js Secret
Created Nov 15, 2018

Embed
What would you like to do?
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;
const { sourceUrl: imageUrl, altText } = featuredImage;
return (
<div key={postId} className="post-card">
<img src={imageUrl} alt={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