Array
Render a list of items with a subset of fields. Extends Base.
Example
items
Item #0
Item #1
- 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
| Param | Example | Type | Status |
|---|---|---|---|
type | type: "array" | "array" | Required |
arrayFields | arrayFields: { title: { type: "text" } } | Object | Required |
defaultItemProps | defaultItemProps: { title: "Hello, world" } | String | - |
getItemSummary() | getItemSummary: (item) => item.title | Function | - |
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",
},
},
},
// ...
},
},
};Example
items
Item #0
Item #1
- 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",
},
},
// ...
},
},
};Example
items
Apple
Banana
- Apple
- Banana