CODEWITHSUNDEEP
reactjsnext.jsstrapi
wookiehunter
wookiehunter

Reputation: 11

Nextjs page refresh issue - post content disappears on refresh

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

Answers (1)

wookiehunter
wookiehunter

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

Related Questions