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:

• max-w-2xl which means max-width: 36rem; (https://tailwindcss.com/docs/max-width)

• mx-auto — margin-x: auto.

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

<section className="pt-6 max-w-2xl mx-auto"></section>

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.

<section className="pt-6 max-w-2xl mx-auto">

  <h3 className="font-bold text-gray-500">

    {comments.length === 1 ? "1 comment" : `${comments.length} comments`}

  </h3>

</section>

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.

comments.map(({ author, content, created_at }) => (

  <article key={created_at} className="bg-gray-100 rounded my-6 p-4">

    <div className="font-bold mb-2">

      {author} ・ {created_at}

    </div>

    <p className="text-gray-700">{content}</p>

  </article>

)

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.

<article key={created_at} className="bg-gray-100 rounded my-6 p-4">

  <div className="font-bold mb-2">

    {author} ・ {new Date(created_at).toLocaleDateString()}

  </div>

  <p className="text-gray-700">{content}</p>

</article>

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!).