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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions