> For the complete documentation index, see [llms.txt](https://docs.trysavvy.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trysavvy.com/other-useful-docs/work-in-progress/pending/work-in-progress-how-to-create-repeatable-button-components-fetching-from-a-database.md).

# Work in Progress: How to Create Repeatable Button Components, Fetching from a Database

{% hint style="warning" %}
**Note: This page only applies to the Old Rendering Engine** - for the New Rendering engine ask a Savvy Expert for help
{% endhint %}

{% hint style="info" %}
Repeatable components take data from an array of objects and turn it into the same amount of components.
{% endhint %}

### Step 1: Create and Prepare your Button

* Create a button where you want the list of buttons to appear.
* Select the component and scroll to the bottom of the Options tab, open the Advanced dropdown.
* Select the REPEATER KEY. This will be the key of the Computed field that is fetching the data and returning the array of objects. Here are some docs for reference:

{% content-ref url="/pages/4P2ZzSPWa5Sw8t51ein5" %}
[Broken mention](broken://pages/4P2ZzSPWa5Sw8t51ein5)
{% endcontent-ref %}

{% content-ref url="/pages/4gStXkCQYsN7F57hKh7M" %}
[Broken mention](broken://pages/4gStXkCQYsN7F57hKh7M)
{% endcontent-ref %}

{% content-ref url="/pages/aaUIPKdntcp2RbUzlNMJ" %}
[Broken mention](broken://pages/aaUIPKdntcp2RbUzlNMJ)
{% endcontent-ref %}

{% hint style="info" %}
You can also do this on an Option Selector, but you should select from the `BUTTON REPEATER KEY` dropdown instead of the `REPEATER KEY` dropdown.
{% endhint %}

### Step 2: Transform the Data

{% hint style="info" %}
You can do this in the same Computed Field as the fetch, but it's a good practice to do it on a different one. 
{% endhint %}

* Map it into an object with a 'key' key, and a 'text' key. Something like this:

```
function result( {
  full_list_key
} ) {
    return full_list_key.map(data =>{
        key: data.id,
        text: data.text
        })
}
```

* Try giving it an HTML structure. For example:

```
function result( {
  full_list_key
} ) {
    return full_list_key.map(data =>{
        key: data.id,
        text: `<div>
            <h1>Name: ${data.name}</h1>
            <h3>Email: ${data.email}</h3>
            <img src=${data.img}>
            </div>`data.text
        })
}
```

### Step 3: Style it

* Add some classes so you can style it with custom selectors

```
function result( {
  full_list_key
} ) {
    return full_list_key.map(data =>{
        key: data.id,
        text: `<div class="repeated_container">
            <h1 class="repeated_name">Name: ${data.name}</h1>
            <h3 class="repeated_email">Email: ${data.email}</h3>
            <img class="repeated_img" src="${data.img}">
            </div>`
        })
}
```

Here's how to style components with custom selectors:

{% content-ref url="/pages/re7QtFp9nuS60QqalQan" %}
[Broken mention](broken://pages/re7QtFp9nuS60QqalQan)
{% endcontent-ref %}

### What if there's more data that I want to show when a user selects one of the options?

Another computed field can easily solve that. The code would look something like this:

```
function result( {
  full_list_key,
  options_key
} ) {
  return (full_list_key || []).find(option => option.id === options_key)
}
```

This would return the full selected object!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.trysavvy.com/other-useful-docs/work-in-progress/pending/work-in-progress-how-to-create-repeatable-button-components-fetching-from-a-database.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.