JSX fragment content is not rendering-CodePudding

[postslug].js

import {PostData} from '../../data/postdata'


export async function getStaticProps({ params }) {
  const posts = PostData.find((p) => p.slug === params.postslug);

  return {
    props: {
      post: posts,
      
    },
  };
}

export async function getStaticPaths() {
  const paths = PostData.map((post) => ({
    params: { postslug: post.slug },
  }));

  return { paths, fallback: false };
}

  
const Post = ({post}) => {
    // const router = useRouter();
    // const slug = router.query.postslug;
    // const post = PostData.find((post1) => post1.slug === slug);

    return (
        <>
            {post.content}
        </>

    )
}

PostData.js

export const PostData = [
    {
        id: 1,
        slug: "article-blog",
        content: `<><main>

            <div className="postpage">
                <section className="article">


                <article>
                    <h2>Google Chrome</h2>
                    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
                </article>

                <article>
                    <h2>Mozilla Firefox</h2>
                    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
                </article>

                <article>
                    <h2>Microsoft Edge</h2>
                    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
                </article>

            </section>
        </div>
        </main></>`
    },
]

The code written in JSX Fragments is not rendering after fetching it. It is just displayed as it is written in an array of objects. Postdata.js file is containing an array of objects. I am trying to fetch the data of blog articles using getStaticProps and getStaticPaths.

Output Like:

CodePudding user response：

You have to use dangerouslySetInnerHTML in React, it is equivalent to seting innerHTML in vanilla JS refer this React.js: Set innerHTML vs dangerouslySetInnerHTML

CodePudding user response：

The first solution can be using dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={{__html: post.content}} />

But as for the security problem, it will lead you to cross-site scripting (XSS) attack. So I'd propose you use html-react-parser that will help you to render a string as JSX safely.

import parse from 'html-react-parser';

const Post = ({post}) => {
    return (
        <>
            {parse(post.content)}
        </>

    )
}