Nesting Blocks inside React and Astro (StoryblokComponent)

[kingmauri]

Hello, I have a nested component, for example: Featuring > Blocks > Text, RichText, etc.

With Astro, it's possible to fetch these contents using something like:

blok.column_1?.map((blok) => { return <StoryblokComponent blok={blok} />; })

These will then be automatically rendered because they have been registered in astro.config.mjs. But what if I want to build the whole component in React and nest blocks inside React components?

I've read that Astro serves as a wrapper for the React components (like the "Counter" example in this repo). But that's only one level. Is there a way to use StoryblokComponent inside React as well? There is a React SDK, but I'm not sure if that's the right way to go - perhaps someone has successfully implemented this already.

Thanks!

[schabibi1]

Hi @kingmauri Sorry for the late reply. I see a similarity in this solved issue #728.

From what I tested, you will need to initialize in the React component to provide useStoryblokApi because it'll give you undefined to fetch components when StoryblokComponent is called in the React component as StoryblokComponent needs data from stories, which you'll need to have access to use APIs from Storyblok.

You can think React component files are separated environments, which is why the modifications I mentioned in the relevant solved issue are needed.

We hope this answers your questions. Please feel free to let us know if you have anything else to share.

[schabibi1]

I'm closing it for now, but please feel free to reopen the issue if you still face the same issue after you try out the solution I suggested above.