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