Collection
Use Collection to iterate over data and repeat the same structure but with different data for each iteration.
Last updated
Use Collection to iterate over data and repeat the same structure but with different data for each iteration.
Last updated
Let's say you are building a list of all your blog posts. Each blog post will have an image, a title, and a link.
You have 50 blog posts. Does this mean you need to duplicate your design 50 times manually? No.
Collections let you design something once, and it will repeat it for every item in the array and contain the data for the current iteration (e.g., the blog post title).
An array is a programming term that generally translates to a list of data.
In the case of blog posts, this might look like the following:
It's important that when binding data to a Collection, you must bind the array, i.e., the data you want to iterate over. If you don't bind the array, you'll receive an error: "The Collection component requires an array in the data property. When binding external data, it is likely that the array is nested somewhere within, and you need to provide the correct path in the binding."
If you are binding external data, the array is nested somewhere within.
In the image, the data bound to the component is:
❌ Not the array
❌ The first item in the array (0), not the entire list
✅ The array
It's unclear why each item is correct or incorrect by just looking at the image, so let's clarify.
You'll know when you get to the array when the next items in the autocomplete are numbers. The numbers represent each item in the list. Once you see the numbers, backspace, as you don't want to select one item; you want the list.
Add the Collection component to the canvas and either manually enter data (less common) or bind data to it (more common).
The Collection iterates over the array, so you must bind just the array portion of your variable to it. See What's an Array for more info.
Optionally, rename the default Collection Item variable to something more semantic. If you are iterating over blog posts, name it "Blog Post."
Now, you can add components to the Collection, and the Collection will automatically duplicate it for the number of items in the array. If you have multiple components, wrap everything in a Box component.
Next, bind the Collection Item (or whatever you named it) to the various components. You will see it output a different value depending on the iteration.
When working with Radix Components, you might want to dynamically generate items for various components such as accordions, tabs, or menus.
You must provide the Value field with a unique value for each item. This is commonly done by binding an ID or slug from the dynamic data to the field.
On Tabs, you need to manually add the "value" property on both the Tab Trigger and Tab Content by going to Settings > Properties & Attributes > "+".
Tab Triggers and Tab Contents maintain their relationship by having the same value. For example, the Tab Trigger with the value "asdf" will make the Tab Content with the value "asdf" active.
Also, you can change the default value on the Tabs instance by binding the first value in the collection to it.
