Why does my Astro site shows HTML tags of Contentful data?

Question

I'm fairly new to Astro. Been stucked in this particular issue for so long.

As the title mentioned, I can't get my contentful data to render properly without the correct formatting. It shows html tags instead of the formatting it supposed to be done. Below is my .astro file. Another important thing to mention is that I use a predefined template for my Astro project. So not sure whether this is related or not.

Thanks in advance.

---
import { contentfulClient } from "../../lib/contentful";
import { documentToHtmlString } from "@contentful/rich-text-html-renderer";
import type { BlogPost } from "../../lib/contentful";

export async function getStaticPaths() {
  const entries = await contentfulClient.getEntries<BlogPost>({
    content_type: "blogPost",
  });

  const pages = entries.items.map((item) => ({
    params: { slug: item.fields.slug },
    props: {
      title: item.fields.title,
      content: documentToHtmlString(item.fields.content),
      date: new Date(item.fields.date).toLocaleDateString(),
      description: item.fields.description,
      slug: item.fields.slug,
      tags: item.metadata.tags
    },
  }));
  return pages;
}
const { title, content, date, description, slug, tags } = Astro.props; 
---

<BaseLayout title={title} description={description}>
    <div class="stack gap-20">
        <div class="stack gap-15">
            <main class="wrapper">
                <div class="stack gap-10 content">
                    <div class="content">
                        {content}
                    </div>
                </div>
            </main>
            
        </div>
        <ContactCTA />
    </div>
</BaseLayout>

Answer 1

Actually, you just need to put the content in the following format.

<article set:html={content} />

This solves my problem.