Skip to main content
ForEach<T>(data: T[], content: (item: T, index: number) => Component): Component;
ForEach<T>(subviews: Component, content: ({ subview: T }) => Component): Component;

​
Parameters

​
data
T[]
An array of data items to iterate over.
​
content
(item: T, index: number) => Component
A function that creates a view for each data item.

​
Support

​
Usage

​
Simple list

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

​
Complex list items

VStack({ spacing: 10 }, [
    ForEach(users, (user, index) => 
        HStack({ spacing: 12 }, [
            Circle()
                .fill(Color("gray"))
                .frame({ width: 40, height: 40 }),
            VStack({ alignment: "leading" }, [
                Text(user.name).font("headline"),
                Text(user.email).font("caption")
            ])
        ])
        .padding()
        .background(Color("white"))
        .cornerRadius(8)
    )
])