Front-End Web & Mobile
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
- Run
amplify pull
to retrieve your new collections. - Import your collections, and add them to your main app page.
- 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. - Pass your child Collection to your prop. In this example, the child component is “ProductCommentCollection”.
- Use the
items
prop to assign values to the child Collection.
🥳 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.