# Loops: iterate over data in your components
[BetaThis feature is new and we're actively working on it.](/beta-experimental-features/#beta-features)
In Design Studio, components support loops, enabling you to iterate with fewer keystrokes.
Use our Design Studio GPT to create a custom component!
[Learn how to best utilize our GPT](/journeys/create-custom-component/#design-studio-gpt) to create code for reusable, custom content.
## Loop through numbers[](#loop-through-numbers)
Numerical iteration is 0 indexed - the first number is 0.
```html
```
Using this component in an email:
```html
A simple email
```
The output source becomes:
```html
A simple email
```
## Loop through arrays[](#loop-through-arrays)
You can loop through an array to dynamically generate repeated elements—like list items—based on your data.
```html
```
Using this component in an email:
```html
A simple email
```
The output source becomes:
```html
A simple email
- tomato
- potato
- lettuce
- cucumber
- carrots
- apples
```
## Passing in arrays[](#passing-in-arrays)
You can also pass in arrays to a component to render data defined in each email they’re in.
```html
```
Using this component in an email:
```html
A simple email
```
The resulting output is:
```html
A simple email
```
## Passing in objects[](#passing-in-objects)
```html
- ${product.name} - ${product.price}
```
```html
A simple email
```
The output is:
```html
A simple email
- apple - $0.50
- banana - $0.75
- tomato - $3.00
```
You can also import objects that are not iterated over.
```html
- ${product.name} - ${product.price}
${props.store.name}
${props.store.location}
```
```html
A simple email
```
The output is:
```html
A simple email Main Office
123 Somewhere Drive
```
## Enumerated iteration[](#enumerated-iteration)
Sometimes you want access to both the iterated item and its index (count) in the loop.
```html
| Food |
Index |
Conditional Message |
| ${food} |
${index} |
${index>3?'the first 4 items dont get this message':''} |
```
Using this in a simple email:
```html
My shopping list
```
This is the output source:
```html
My shopping list
| Food |
Index |
Conditional Message |
| tomato |
0 |
|
| potato |
1 |
|
| lettuce |
2 |
|
| cucumber |
3 |
|
| carrots |
4 |
the first 4 items dont get this message |
| apples |
5 |
the first 4 items dont get this message |
| bananas |
6 |
the first 4 items dont get this message |
| beans |
7 |
the first 4 items dont get this message |
```
## Enumerated object iteration[](#enumerated-object-iteration)
```html
${index+1}. ${key}: ${value}
```
Using this component in a simple email:
```html
```
The output source becomes:
```html
1. key1: value1
2. key2: value2
3. key3: value3
```