Ask toddle AI

๐Ÿ 

Docs home

๐Ÿ‘ถ

Getting started

๐ŸŽ“

1st week in toddle

๐Ÿ› ๏ธ

The editor

๐Ÿงฑ

Elements

๐Ÿ’…

Styling and layout

๐Ÿ“ฆ๏ธ

Components

๐Ÿ“„

Pages and navigation

โ˜๏ธ

API setup

๐Ÿงฎ

Formulas

๐Ÿ””

Events and actions

๐Ÿ“ฆ

Packages

๐Ÿค–

Custom code

๐Ÿ‘ฏโ€โ™‚๏ธ

Integrations

๐Ÿฟ

Tutorials

๐Ÿงฐ

Other

Repeat formulas

You can use the repeat formula to create dynamic lists or grids where items are repeated based on data.

Using the repeat Formula

The repeat formula allows you to create multiple instances of an element based on a set of values or a numeric range. It is useful for generating dynamic content where the number of repetitions is determined by your data.

The output of your formula must be iterable, that is an Array of items.

You can use the formula Range to repeat the same item a number of times without dynamic data. It will simply output an array of numbers between the min and max values.

Optimizing with the repeatKey Formula

The repeatKey formula is optionally used in conjunction with repeat for optimization purposes, especially when working with a large number of repeated elements. It assigns a unique key to each repeated instance, enabling toddle to more efficiently re-render only the elements that have changed, rather than the entire set of repeated elements.

The repeatKey is also useful when elements swap positions (e.g. when using drag and drop to change the order of an array) to ensure our runtime knows if an item kan be reused across renders or not.

The output of the repeatKey formula should be a unique ID/string for each repeated item.

Notice, that using just the index as key prevents toddle from doing optimizations. You should aim to use a unique identifier such as an database-id or hash. Optimizations are additionally dropped for any items with the same key.

This approach reduces the computational overhead during updates, as toddle can track which items have changed and only re-render those items.

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code โ€” but accessible to your entire team!

Try toddle โ€” it's free!
Server-side rendered Installable PWAs Connect to any database As performant as code toddle is built in toddle undefined undefined undefined undefined undefined
undefined Style tokens Export as web components No feature limits Connec to any API Extend with code undefined undefined undefined undefined

ยฉ Copyright 2024 toddle. All rights reserved.