-
Notifications
You must be signed in to change notification settings - Fork 211
Open
Description
Hello,
Let's see a screenshot of my notion page (available here)
And now, let's see a screenshot of my notion integration on my portfolio
As you can see, the content that are nested into the toggle heading aren't displaying. When I turn the toggle heading in classical heading, the nested content are successfully displaying.
Here is my code
NotionEmbed.jsx
import React, {useEffect, useState} from 'react'
import { useTranslation } from 'react-i18next'
import { NotionRenderer } from 'react-notion'
import "react-notion/src/styles.css"
export default function NotionEmbed(props) {
const { t, i18n } = useTranslation();
const { notionPageId } = props;
let [notionContent, setNotionContent] = useState({});
useEffect(() => {
async function getStaticProps() {
const data = await fetch(
`https://notion-api.splitbee.io/v1/page/${notionPageId}`
).then(res => res.json());
setNotionContent(data);
}
getStaticProps();
}, []);
useEffect(() => {
console.log(notionContent)
}, [notionContent]);
return (
<>
<div className="notion-embed">
<NotionRenderer blockMap={notionContent} fullPage={true} />
</div>
</>
)
}
Courses.jsx (the component where the notion embed is used)
import './Courses.scss'
import React from 'react'
import { useTranslation } from 'react-i18next'
import NotionEmbed from "../NotionEmbed/NotionEmbed";
export default function Courses() {
const { t, i18n } = useTranslation();
return (
<>
<section id="section-courses">
<h2 className="courses-title">
{t('courses.MainTitle')}{' '}
<span className="color-tertiary">{t('courses.TitleSpan')}</span>
</h2>
<div className="courses-container">
<NotionEmbed notionPageId="1a9d25ee-18f8-4b92-98a3-d1a1e8149863" />
</div>
</section>
</>
)
}
And finally, here is my blockMap
content :
Could smbdy help me with this issue ? Thank you guys 💯
Metadata
Metadata
Assignees
Labels
No labels