ForEach
ForEach is a utility function for rendering arrays of data. ForEach is a helper function that maps over an array and renders each item.
ForEach is a utility function for rendering arrays of data. ForEach is a helper function that maps over an array and renders each item.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<ForEach data={items} keyExtractor={(item) => item.id} renderItem={(item) => (
<Text>{item.name} - Value: {item.value}</Text>
)}></ForEach>In VStack
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={10}>
<ForEach
data={items}
keyExtractor={(item) => item.id}
renderItem={(item) => (
<Text style={{ padding: '10px', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>
{item.name}
</Text>
)}
/>
</VStack>With Index
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={10}>
<ForEach
data={items}
keyExtractor={(_item, index) => `item-${index}`}
renderItem={(item, index) => (
<HStack spacing={10}>
<Text style={{ fontWeight: 'bold' }}>{index + 1}.</Text>
<Text>{item.name}</Text>
</HStack>
)}
/>
</VStack>With Buttons
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={10}>
<ForEach
data={items}
keyExtractor={(item) => item.id}
renderItem={(item) => (
<HStack spacing={10}>
<Text>{item.name}</Text>
<Button onClick={() => alert(`Clicked ${item.name}`)}>
Action
</Button>
</HStack>
)}
/>
</VStack>Complex Items
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={15}>
<ForEach
data={complexItems}
keyExtractor={(item) => item.id}
renderItem={(item) => (
<VStack spacing={5} style={{ padding: '15px', backgroundColor: '#f9f9f9', borderRadius: '8px' }}>
<Text style={{ fontSize: '18px', fontWeight: 'bold' }}>{item.title}</Text>
<Text>{item.description}</Text>
<Text style={{ color: '#666' }}>Count: {item.count}</Text>
</VStack>
)}
/>
</VStack>API
| Prop | Type | Required | Description |
|---|---|---|---|
data | T[] | Yes | The array of data to iterate over. |
keyExtractor | (item: T, index: number) => string | number | Yes | Function to extract a unique key from each item. |
renderItem | (item: T, index: number) => ReactNode | Yes | Function to render each item. |
Overview
ForEach is a utility function for rendering arrays of data. ForEach is a helper function that maps over an array and renders each item.
SwiftUI Correspondence: Similar to SwiftUI's ForEach view.
Notes
- ForEach requires
data,keyExtractor, andrenderItemprops keyExtractormust return a unique key for each itemrenderItemreceives the item and index as parameters- ForEach handles the mapping and key assignment automatically
- Use ForEach instead of manual map() for better consistency
Best Practices
- Unique keys: Always provide unique keys via keyExtractor
- Performance: ForEach is optimized for rendering lists
- Consistency: Use ForEach consistently for array rendering
- Type safety: Use TypeScript generics for type safety
- Readability: ForEach improves code readability over manual mapping