"Repeat for each" with React custom component

Technical Questions
1

I’m using the Repeat for each binding option to create a list of products. From my custom component the only way to achieve it is using the witChildren HOC. Until this point is everything okay as I show in the example below.

const ProductGrid = ({
  spacing = 4,
  children,
  columns = {
    mobile: 1,
    tablet: 2,
    desktop: 3,
  },
}) => {
  return (
    <Flex spacing={spacing} wrap="wrap" direction="row">
      {children}
    </Flex>
  )
}

What I would like to do is to wrap each child of the “Repeat for each” function. But what happens is that the child element is not the actual array of bound elements from “Repeat for each” function but only the single one used to repeat:

  return (
    <Flex spacing={spacing} wrap="wrap" direction="row">
      {Children.map(children, (child) => {
        return (
          <WrapItem
            key={child.key}
            w={[1 / columns.mobile, 1 / columns.tablet, 1 / columns.desktop]}
          >
            {child}
          </WrapItem>
        )
      })}
    </Flex>
  )

This renders:

<ul>
  <li>  ... // Builder bound elements list  </li>
</ul>

I expect to map the list of repeated elements.

2

Hi @luigiveoworld thanks for the question this is an interesting use case. Currently, as you’ve noticed, the way withChildren works under the hood is to just pass the children array to the custom component.

Within the Visual Editor, any changes to content or presentation are passed as a JSON to our SDK, which is actually building the page within your app. For indicate within that content JSON if an element is to be repeated,

whether a content block repeats is passed as a flag, which you can see here (right click the element in the Layers tab and click JSON view)

Screen Shot 2021-12-09 at 9.21.45 AM

but the content itself isn’t actually repeated until it is built by the SDK. What exactly are you trying to achieve by wrapping each child? If it is visual changes, we may be able to address directly in the Visual Editor. Also, within our React SDK it is possible to pass functions, complex objects and data down to elements, I wonder if that might be able to help achieve your goal?

Any further info could be helpful…also if you would like to share your content URL or apiKey I can look further into your space to help troubleshoot any issues. Feel free to comment here or you can DM it to me directly.