Props not getting Rendered in NextJs - reactjs

Question

I have a post page in blog model, which includes Detail and Comment Component. getStaticProps from the post page gets the data, and I am passing this data as props to the Detail Component. Yet the the Detail component is not getting rendered.
Here's the post page:
import BlogDetail from "../../components/BlogDetail/BlogDetail"
import { CSSTransition } from 'react-transition-group'
import AuthContextProvider from "../../context/AuthContext"
import Cookie from "../../components/Cookie"
import { ThemeContext } from "../../context/ThemeContext"
import { useContext } from "react"
import '#fortawesome/fontawesome-svg-core/styles.css'
import dynamic from 'next/dynamic'
const Navbar = dynamic(() => import("../../components/Navbar"), { ssr: false })
import axios from "axios"
import { baseURL } from "../../functions/baseUrl"
export const getStaticPaths = async () => {
const res = await axios.get(baseURL + "/post/");
const info = await res.data
const paths = info.map(datum => {
return {
params: { slug: datum.slug }
}
})
return {
paths,
fallback: false
}
}
export const getStaticProps = async (context) => {
const slug = context.params.slug;
const res = await axios.get(baseURL + '/post/' + slug + "/");
const data = await res.data;
return {
props: { datum: data }
}
}
const Blog = (datum) => {
const [dark] = useContext(ThemeContext)
return (
<div className={`main ${dark}`}>
<AuthContextProvider>
<Navbar />
<CSSTransition
in={true}
classNames="pagetransitions"
timeout={100}
key={1}
appear={true}
unmountOnExit
>
<div>
<Cookie />
<BlogDetail title={datum.title} datum={datum} />
</div>
</CSSTransition>
</AuthContextProvider>
</div>
)
}
export default Blog;
And my BlogDetail model:
import React, { useState } from 'react';
import styles from "../../styles/blogDetail.module.css"
import timeformatter from "../../functions/timeFormatter"
import Tags from "../Tags";
import Head from "next/head"
import dynamic from 'next/dynamic'
const Favourite = dynamic(() => import("./Favourite"), { ssr: false })
const Comment = dynamic(() => import("./Comment"), { ssr: false })
function BlogDetail(props) {
const data = useState(props.datum)
function createMarkup() {
return { __html: data.text };
}
return (
<div className={styles.blog_text_container}>
<div>
<h1>{data.title}</h1>
<Tags tag={data.tags} />
{data.image_head === null ? (
<span></span>
) : (
<div className={styles.article_detail_image}>
<img className={styles.blog_header_image_detail} alt={data.alt_image_text} src={data.image_head}></img>
</div>
)}
<br></br>
<div dangerouslySetInnerHTML={createMarkup()} />
<br></br>
<span>{data.comments}</span>
<br></br>
<span>Published: {timeformatter(data.created_at)}</span>
<br></br><br></br>
<Favourite id={data.id} favcount={data.favcount} /><br></br>
<Comment id={data.id} /><br></br>
<br></br>
</div>
</div>
)
}
export default BlogDetail
I have tried passing my props individually like the titles, texts. But nodda. I have tried directly rendering the props without including state. Any help would appreciated.

Answer 1

In post page destructure dataum
...other code remains same
const Blog = ({datum}) => {
...other code remains same
In blogdetail page
...other code remains same
function BlogDetail({datum : data}) { // destructuring dataum and naming it as data since you have used data.* in your code
// you donot need useState here
...other code remains same

Answer 2

The issue is probably here
// some code
const Blog = (datum) => {
// some code
Make it to
const Blog = ({datum}) => {
// your code
As explained here
https://nextjs.org/docs/basic-features/data-fetching#simple-example