This video is available to students only

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 <PostBody /> 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 PostBody has:

And additionally, we'll add padding top — pt-6.

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 separate count variable. Anyway, we'll add a h3 element with bold text and text color as gray-500. Feel free to customize it.

Comment element

As the next step, we'll map through the comments, and for each, we'll create anarticle 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 built-in function toLocaleDateString.

Handle loading state

Last step — we'll handle the loading state. I'm adding a ternary operator, and whenever the 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 spinner!).

Start a new discussion. All notification go to the author.