Skip to main content
ForEach<T>(data: T[], content: (item: T, index: number) => Component): Component;
ForEach<T>(subviews: Component, content: ({ subview: T }) => Component): Component;
​
data
T[]
required
An array of items to iterate over. Each item is passed to the content function.
​
content
(item: T, index: number) => Component
required
A function that returns a component for each item. Receives the item and its index.
Subviews overload:
​
subviews
Component
required
A component whose children are decomposed into individual subviews for rearranging or inspection.
​
content
({ subview: T }) => Component
required
A function that receives each subview and returns a component.

​
Support

​
Usage

​
Basic iteration

ForEach(["Apple", "Banana", "Cherry"], (fruit) =>
    Text(fruit)
)

​
Using the index

ForEach(items, (item, index) =>
    HStack([
        Text(`${index + 1}.`),
        Text(item.name)
    ])
)

​
Inside a layout container

VStack({ spacing: 8 }, [
    ForEach(users, (user) =>
        HStack({ spacing: 12 }, [
            Circle()
                .fill(Color("blue"))
                .frame({ width: 32, height: 32 }),
            Text(user.name)
        ])
    )
])

​
Subview decomposition

Use the subviews overload to inspect and rearrange children of an existing component: 
ForEach(
    VStack([Text("A"), Text("B"), Text("C")]),
    ({ subview }) => subview.padding(8)
)

​
Notes

  • Each call to the content function should return exactly one component. Use Group to return multiple components as one.
  • The index parameter is zero-based.
  • The subviews overload enables view decomposition patterns, letting you restructure existing component trees without rebuilding them.

​
See Also

  • Group — grouping without layout
  • List — scrollable list with selection support