NEW: Generate React UI components with nested list data from Figma designs using Amplify Studio

This blog post was written by Wesley Peck, Senior Product Manager – Technical at AWS Amplify.

Component Slots are a new feature in Amplify Studio that allows you to customize the content of components from your UI Library. If you haven’t read through our previous posts in this series, take a look to learn how to add a slot to a single component, and how to use slots with Collections.

This post will expand on our last post, and detail how to nest one collection inside another, leveraging component slots. Nesting collections allows you to take full advantage of multiple UI components, powered by data, and generate comprehensive app pages

What are Nested Collections?

Nested Collections refer to when you pass a Collection (i.e. a repeating set of components) into the component slot of another Collection. If you followed along during the last blog post on Collections with Component Slots, you may have noticed that using a .map() method to generate JSX is somewhat like generating your own Collection. Instead of mapping data, you can pass another collection into the slot of the first collection.

How to nest Collections

Pre-Requisites

• An Amplify Studio app.
• At least 2 components in your UI Library. If you don’t have any components in your UI Library, you can use our Figma file to generate some.
• At least 2 data models, with a one-to-many relationship. For this example, we will use a model named “Products” that has a one-to-many relationship with “Comments.”

Generate Two Collections

In order to nest one collection in another, you will need two collections to start. This example will use the collection generated in the previous blog post, named “ActionCardWithCommentsCollection”, as well as a new collection called “ProductCommentCollection”.

“ActionCardWithCommentsCollection” is mapped to the name, description, and image fields in the “Products” data model, and has two slots: comments and brandArea. For more info on how to create this collection, review the previous blog post.

“ProductCommentCollection” is a collection of components named “ProductCommenctCard”, each of which is mapped to the author, content, and createdAt fields in the “Comments” data model.

Import and Nest Your Collections

1. Run amplify pull to retrieve your new collections.
2. Import your collections, and add them to your main app page.
3. In your parent Collection, use the overrideItems prop to access your slot. In this example, the parent collection is “ActionCardWithCommentsCollection” and our slot is comments.
4. Pass your child Collection to your prop. In this example, the child component is “ProductCommentCollection”.
5. Use the items prop to assign values to the child Collection.

import { 
  ActionCardWithCommentsCollection,
  ProductCommentCardCollection
} from './ui-components';

function App() {
  return (
    <div>
      <ActionCardWithCommentsCollection
      {/*Use the overrideItems prop to access your slot*/}
        overrideItems={({item, index}) => ({
        {/*Pass your child collection to your slot and assign values to the items prop*/}
          comments: <ProductCommentCardCollection items={item.Comments} />,
          brandArea: 
          <div>
            <small><i>AWS Amplify Brand</i></small>
          </div>,
        })}
         />
    </div>
  );
}

🥳 Success!

And with that, you’ve successfully nested a collection in a component slot! Nice!

The end result of this tutorial is much cleaner code that dynamically generates both Products and Comments for your application, but there are endless use cases. Component slots are flexible tools to help you adapt components to fit your specific development need.

Do you have ideas on how nested collections can benefit your projects? Share your ideas with us on Twitter, get inspired by other community members in our Discord channel, or build your vision as part of the September Amplify hackathon! You can also find documentation on Component Slots here, and share your feedback with us on Github.