# 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: 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:

```
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>
```

The question should be specific, self-contained, and written in natural language.
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.