Repeated Bricks

A brick used as a repeater item is just a normal brick.

It receives also the index on the props, so that it may conditionally render based on its position in respect to the items array.

Before v3.5.0 you needed to spread ...rest props on its root element in order for it to be correctly focusable in the Admin interface. This is no more needed and it is better not to do it to avoid invalid attributes on DOM elements.

Example

const Badge: types.Brick<BadgeProps> = ({
  index,
}) => {
  return (
    <div>
      I am the item #{index}.
      <Text
        propName="item-text"
        placeholder="Text..."
        renderBlock={({ children }) => <p>{children}</p>}>
      </Text>
      ...
    </div>
  )
}

Badge.schema = {
  ...
}

export default Badge