# Repeatable Components

{% 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" %}
A Repeatable Component is, as their name implies, a component that will be repeated several times in a page, according to a certain key and probably linked to a computed field
{% endhint %}

### What are Repeatable Components used for?

* Repeating components that share the same structure but change content.
* Displaying a certain component x times, depending on the output of a computed field.

### Can any component turn into a Repeatable Component?

* Yes, we can add this property to every component on the Flow, excluding Heading Labels, Titles, and Subtitles.

### How do I add them?

***Repeatable components are configured in the*** [***🎚 Editor Sidebar***](https://trysavvy.gitbook.io/savvy/deprecated/the-editor-sidebar) ***in the Config Panel.***

* Once we have created our New component selecting the option **+New Component**

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MaGcfSakhqdHaWyb0T_%2F-MlVSLWf8DjjI1B8bdYl%2F-MlVT132Hc410s6teRGF%2Fcreate-new%20computed%20flied.png?alt=media\&token=984a4d46-040a-45c1-8b2d-3444ed5f4315)

* And after applying a Key to the component a new Menu will display, in which we will find a **Optional - Repeater Key**

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MaGcfSakhqdHaWyb0T_%2F-MlV33H76e7XZROb9JRV%2F-MlVRYHmHP0njntMg4te%2Frepeated-components.png?alt=media\&token=96d9862d-e024-4ca4-ba67-920f2fee6c2d)

* We need to choose which Key to repeat in order to display this component the x amount of times.

{% hint style="info" %}
This Key will probably be defined by the result of a **Computed Field,** in order for this to display properly the Computed Field should return an array of objects. Each object of this array will become the content for a new **Repeatable Component.**
{% endhint %}

The example below will display 5 Components, as it has 5 objects inside of the array, of course this is hardcoded for illustrative purposes

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MaGcfSakhqdHaWyb0T_%2F-MlVUS6stTL1pGPOwRfC%2F-MlVUhAXffBsXTrKke6Z%2Fcomputed%20field.png?alt=media\&token=14d40f0a-9b13-4cec-a65d-e727ee5c6fde)
