Implementing UI for comments and a new comment form
In this lesson, we'll add a UI for the comments section and a new comment form. We'll also display the comments that we get from the React hook.
In this lesson, we'll add a simple UI for the comments. We already fetched comments on the frontend, and now it's time to show them nicely in the application.
Note: The UI is not the main focus of this course, so this lesson will be relatively brief.
We'll use Tailwind for styles. It's a CSS framework that provides many easy-to-use CSS utility classes. Our blog example comes with Tailwind's setup, so we're ready to start with the UI. Let's get to it!
Displaying the comments#
We're going to alter JSX in the
Post component right after the
component. That's where we'll add the comments list and the form. Let's do it
step by step.
Section for the comments
First, we'll add a
section component and apply the same styles
And additionally, we'll add padding top —
Title with the comments count
Right now, we fetch all the comments, so the number of the comments is an array
length. In the next module, we'll be working on pagination, and we'll have a
count variable. Anyway, we'll add a
h3 element with bold text and
text color as
gray-500. Feel free to customize it.
As the next step, we'll map through the comments, and for each, we'll create an
article element with background color
gray-100, rounded borders, vertical
margin, and padding.
Inside, we'll have information about author and comment creation date. This element will have bold font and margin bottom.
The last thing we need to do is add a
paragraph element with the content. I'm
going to make the text slightly lighter than the rest of the page.
Simple date formatting
I'm also going to format the date so that it's in a more readable form. I'll use
Handle loading state
Last step — we'll handle the loading state. I'm adding a ternary operator, and
loading variable is true, I'll want
Loading comments... text to
be rendered (yes, I'm going with a super simple option here. Feel free to add a