Wherever you need to have a repeating set of bricks inside your brick, you can use the <Repeater> component.
In it's simplest form it is just <Repeater propName="...">.


interface RepeaterProps {
propName: string
itemProps?: types.Props
renderWrapper?: (items: React.ReactElement) => React.ReactElement
renderItemWrapper?: (
item: React.ReactElement,
index?: number,
itemsCount?: number
) => React.ReactElement

Properties definition

propNameName of the prop containing the repeated items (should match the one in the repeaterItems schema property)
itemProps?Optional object with props passed to all the items (for example a global configuration that is the same for all the items).
renderWrapper?Optional function taking items as an argument. It should return JSX that wraps the items. Rendered only if there is at least one repeated item.
renderItemWrapper?Optional wrapper around each item. Has item, index and itemsCount as arguments and should return JSX

Usage example

renderWrapper={(items) => (
<div className="flex justify-center items-center">{items}</div>