NextJS 13 - Rendering as Text not HTML

Question

I am trying to figure out why the HTML text that is in my CosmicJS CMS is rendering on the page as text.

Here is the function to get the post.

export async function getPost() {

    const data = await Promise.resolve(
      cosmicClient.objects
        .findOne({
          type: 'posts',
          slug: 'first-90-days-as-cio'
        })
    );

    const post: Post = await data.object;


    return post;
}

Here is the code that calls the function, gets the post, and then displays the content.

async function Post() {
   
    let post = await getPost();

    return (
        <>
          <div className="mobile:w-full tablet:w-3/5  items-center">
                            <h2 className="text-primary text-center mobile:text-2xl tablet:text-3xl px-14 py-5">
                                {post?.title}
                            </h2>
                            <p className="text-black px-10 font-light text-justify">
                                {post?.metadata.content}
                            </p>
                        </div>
        </>
    );

Here is what the text looks like rendered on the page...

Thanks in advance for your assistance!

Answer 1

I think that you need to use dangerouslySetInnerHTML prop

<p className="text-black px-10 font-light text-justify" 
dangerouslySetInnerHTML={{ __html: post?.metadata.content }}/>