Adding repeated elements

Plasmic’s designs are static, but in your real site you may want dynamically repeating sets of elements. These usually repeat according to some data or state. For instance, you want to show a list of blog posts or products.

This is easy to do simply using either slots or prop overrides—there’s no specific API concept for repeating elements.

First, we recommend ensuring that the children you want to repeat are already extracted as their own component. For instance, if you have a Homepage component/page containing a list of blog posts, extract this as a BlogPost component. (This naturally tends to be the case, and these components naturally tend to have slots for the parts that vary—for instance the BlogPost might have a title and excerpt slot so that the Plasmic static design can show a set of BlogPosts that have different text.)

If the Homepage put these into an element named blogPosts, then you can override the element’s children prop with the dynamic set of BlogPosts you want:

// pages/Homepage.tsx page component

function Homepage(props) {
  const posts = useBlogPosts(); // For instance, fetch the data from a CMS.
  return (
    <PlasmicComponent
      component={'Homepage'}
      componentProps={{
        ...props,
        blogPosts: {
          children: posts.map((post) => (
            <PlasmicComponent
              component="BlogPost"
              componentProps={{
                title: post.title,
                excerpt: post.excerpt
              }}
            />
          ))
        }
      }}
    />
  );
}

If the Homepage had a slot for the blog posts (called blogPosts), then you can simply pass that into the slot rather than overriding an element’s children prop:

// pages/Homepage.tsx page component

function Homepage(props) {
  const posts = useBlogPosts(); // For instance, fetch the data from a CMS.
  return (
    <PlasmicComponent
      component={'Homepage'}
      componentProps={{
        ...props,
        blogPosts: posts.map((post) => (
          <PlasmicComponent
            component="BlogPost"
            componentProps={{
              title: post.title,
              excerpt: post.excerpt
            }}
          />
        ))
      }}
    />
  );
}

Have feedback on this page? Let us know on our forum.