Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested block aren't rendering #83

Open
DamienFoulon opened this issue Jul 7, 2024 · 0 comments
Open

Nested block aren't rendering #83

DamienFoulon opened this issue Jul 7, 2024 · 0 comments

Comments

@DamienFoulon
Copy link

Hello,

Let's see a screenshot of my notion page (available here)

image

And now, let's see a screenshot of my notion integration on my portfolio

image

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 :

pastebin

Could smbdy help me with this issue ? Thank you guys 💯

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant