Skip to content

Nested block aren't rendering #83

@DamienFoulon

Description

@DamienFoulon

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 💯

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions