Reputation: 11
I am building a nextjs / strapi cms site with CKEditor5 for post content creation in the backend. Creating the content works as does the initial render of the [slug] page. However, if I refresh the page the post.content is not reloaded but everything else is.
I have had to use dangerouslySetInnerHTML to get the post.content to render as entered rather than as a block or text wrapped in html tag.
Is there a way to re-trigger the render?
The [slug] code is as follow;
import Layout from '@/components/Layout';
import { API_URL } from '../../config/index';
import Link from 'next/link';
import Image from 'next/image';
import styles from '@/styles/SingleArticle.module.css';
import { Container } from 'react-bootstrap';
export default function EventPage({ post }) {
return (
<Layout>
<Container>
<div className={styles.container}>
<h2 className={styles.title}>{post.title}</h2>
<Image
src={post.image.formats.thumbnail.url}
alt={post.title}
width={600}
height={600}
className={styles.image}
/>
<span className={styles.credit1}>
Image Credit: <span className={styles.credit2}>{post.credit}</span>
</span>
<p
className={styles.content}
dangerouslySetInnerHTML={{ __html: post.content }}
></p>
<Link href='/blog'>
<a className={styles.back}>Go Back</a>
</Link>
</div>
</Container>
</Layout>
);
}
export async function getServerSideProps({ query: { slug } }) {
const res = await fetch(`${API_URL}/posts?slug=${slug}`);
const posts = await res.json();
return {
props: {
post: posts[0],
},
};
}
Upvotes: 0
Views: 1445
Reputation: 11
So I found the answer to this and its really simple...
<p
className={styles.content}
dangerouslySetInnerHTML={{ __html: post.content }}
></p>
has to be
<div
className={styles.content}
dangerouslySetInnerHTML={{ __html: post.content }}
></div>
as React won't let you wrap the content in a para tag.
Upvotes: 1