API ReferenceFieldsArray

Array

Render a list of items with a subset of fields. Extends Base.

Interactive Demo
Example
  • Apple
  • Banana
const config = { components: { Example: { fields: { items: { type: "array", arrayFields: { title: { type: "text" }, }, }, }, render: ({ items }) => { return ( <ul> {items.map((item, i) => ( <li key={i}>{item.title}</li> ))} </ul> ); }, }, }, };

Params

ParamExampleTypeStatus
typetype: "array"”array”Required
arrayFieldsarrayFields: { title: { type: "text" } }ObjectRequired
defaultItemPropsdefaultItemProps: { title: "Hello, world" }String-
getItemSummary()getItemSummary: (item) => item.titleFunction-
maxmax: 3Number-
minmin: 1Number-

Required params

type

The type of the field. Must be "array" for Array fields.

const config = { components: { Example: { fields: { items: { type: "array", arrayFields: { title: { type: "text" }, }, }, }, // ... }, }, };

arrayFields

Describe the fields for each item in the array. Shares an API with fields.

Can include any field type, including nested array fields.

const config = { components: { Example: { fields: { items: { type: "array", arrayFields: { title: { type: "text" }, }, }, }, // ... }, }, };

Optional params

defaultItemProps

Set the default values when a new item is added to the array.

const config = { components: { Example: { fields: { items: { type: "array", arrayFields: { title: { type: "text" }, }, defaultItemProps: { title: "Hello, world", }, }, }, // ... }, }, };
Interactive Demo
Example
  • Apple
  • Banana

getItemSummary(item, index)

Get a label of each item in the array.

const config = { components: { Example: { fields: { items: { type: "array", arrayFields: { title: { type: "text" }, }, getItemSummary: (item) => item.title || "Item", }, }, // ... }, }, };
Interactive Demo
Example
  • Apple
  • Banana

max

The maximum amount of items allowed in the array.

const config = { components: { Example: { fields: { items: { type: "array", arrayFields: { title: { type: "text" }, }, max: 3, }, }, // ... }, }, };
Interactive Demo
Example
  • Apple
  • Banana

min

The minimum amount of items allowed in the array.

const config = { components: { Example: { fields: { items: { type: "array", arrayFields: { title: { type: "text" }, }, min: 1, }, }, // ... }, }, };
Interactive Demo
Example
  • Apple
  • Banana