> ## Documentation Index
> Fetch the complete documentation index at: https://dev.writer.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Repeater

The *Repeater* component allows you to repeat a group of components according to a list or dictionary.

## How it works

*Repeater* repeats its contents for every item of a given list or dictionary. It's similar to a `for each` construct.

Each iteration is rendered with a different **context**, a dictionary containing the key and value for the relevant item. By default, in the variables `itemId` and `item`.

### Food Selector example

<img src="https://mintcdn.com/writer/9jV0H_SSzBim4ReZ/framework/images/repeater.example.png?fit=max&auto=format&n=9jV0H_SSzBim4ReZ&q=85&s=c0b9701b4f9e6efeb7a394d3516994d6" alt="Repeater example" width="2291" height="1003" data-path="framework/images/repeater.example.png" />

Given the state below, the contents of *Repeater* will be repeated 3 times. For the first iteration, `itemId` will equal `Banana`, and `item` will equal `{"type": "fruit", "colour": "yellow"}`. Components inside *Repeater* will be able to access this data using references such as `@{itemId}` and `@{item.type}`.

```py theme={null}
wf.init_state({
    "articles": {
        "Banana": {
            "type": "fruit",
            "colour": "yellow"
        },
        "Lettuce": {
            "type": "vegetable",
            "colour": "green"
        },
        "Spinach": {
            "type": "vegetable",
            "colour": "green"
        }
    },
    "order_list": []
})
```

## Event context

When working with *Repeater* components, you can get the context data using the `context` argument in the event handler.

Continuing with the Food Selector example above, the following handler can be linked to a *Button* —allowing users to add items to a list.

```py theme={null}
# The event handler below adds the itemId
# of the relevant article to the order list
def handle_add_to_list(state, context):
    state["order_list"] += [context["itemId"]]
```

<Warning>
  Binding directly to context isn't possible

  Use dynamic accessors when binding inside a *Repeater*. For example, `articles[itemId].colour`. This will bind to a different property of `articles` for every `itemId`.
</Warning>