Created
July 25, 2020 09:54
-
-
Save tharsheblows/e47e51c69f7f6dab48e74a11907bcf6b to your computer and use it in GitHub Desktop.
Lists all the comments if given an array of them from the WP REST API.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** @jsx jsx */ | |
import { jsx, Styled } from 'theme-ui' | |
import React from 'react' | |
import Comment from './Comment' | |
const CommentsList = ({ comments }) => { | |
const commentCount = ( comments ) ? `${comments.length} ` : '' | |
const commentHeading = | |
commentCount > 1 ? 'Comments' : commentCount < 1 ? 'No comments' : 'Comment' | |
const commentsList = comments ? ( | |
<> | |
<div sx={{ mb: 2 }}> | |
{comments.map(comment => ( | |
<Comment comment={comment} key={comment.id} /> | |
))} | |
</div> | |
</> | |
) : null | |
return ( | |
<> | |
<Styled.h2 | |
sx={{ textTransform: `uppercase`, fontSize: [3, 4, 5], mt: 4 }} | |
className="comments-title" | |
> | |
{commentCount}{commentHeading} | |
</Styled.h2> | |
{commentsList} | |
</> | |
) | |
} | |
export default CommentsList |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment