Using a map inside an SbEditable

Hello,

I have created a page component which contains a field called blocks which are my custom components. They are dynamically rendered based on the component type. Similar to how the tutorials go. (I am using the Gatsby tutorial).

const Page: React.FC<Props> = ({ blok }) => (
  <SbEditable content={blok}>
      {blok.body?.map((childBlok: SbEditableContent) => <DynamicComponent blok={childBlok} key={childBlok._uid} />)}
      {!blok.body && <H1 tw="text-center">Create a blok to get started</H1>}
  </SbEditable>
)

However, in the live editor the page component only wraps the first block. It’s a bit annoying as when I navigate to the page component, I’m zoomed back up to the top of the page and need to scroll down if I just wanted to go to the next component.

This doesn’t happen if I have a div wrapping the map. So when I click on the in-between space between components, I am directed to the page component.

const Page: React.FC<Props> = ({ blok }) => (
  <SbEditable content={blok}>
    <div>
      {blok.body?.map((childBlok: SbEditableContent) => <DynamicComponent blok={childBlok} key={childBlok._uid} />)}
      {!blok.body && <H1 tw="text-center">Create a blok to get started</H1>}
    </div>
  </SbEditable>
)

I am using a flex box wrapper from a layout component so I’d prefer not to have to do this. Using fragments doesn’t solve this.

Thanks in advance for the help.

Hello, Nick (@XylophoneHero ). Sorry for the late response.

Could you provide us the value types of SbEditableContent ?
Also, could you share with us any errors you see in the dev tools console?

I’d love to have more information about the current results you’re facing in order to find a possible solution.

Thanks,
Arisa

Hi Arisa.

I ended up adding a div inside the SbEditable so it’s no longer an issue.

Thanks,

Nick

1 Like