Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Wix Design System (WDS)

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";

# ArrayItems

A list whose item shape you define. Use it for a repeatable field, such as a list of
features or a set of tags, where each item is a single value or a structured object.
Unlike other types, its runtime shape is not fixed. It is an array of whatever you declare
in the manifest.

## Component

In your component code, import the `ArrayItems` type from `@wix/editor-react-types`:

```ts
import type { ArrayItems } from '@wix/editor-react-types';
```

`ArrayItems` is an array whose element shape is the one you declared. In your component,
use a type that matches that declaration rather than the generic `ArrayItems`.

### Usage

Your code either consumes a value of type `ArrayItems` or produces one:

::::tabs
:::Consumers
In a component that receives an array, map over it.

A list of single values, such as `tags`:

```tsx
function TagList({ tags }: { tags?: string[] }) {
  return (
    <ul>
      {tags?.map((tag) => (
        <li key={tag}>{tag}</li>
      ))}
    </ul>
  );
}
```

A list of structured objects, such as `features`:

```tsx
function FeatureList({ features }: { features?: Array<{ title: string }> }) {
  return (
    <ul>
      {features?.map((feature) => (
        <li key={feature.title}>{feature.title}</li>
      ))}
    </ul>
  );
}
```
:::
:::Producers
When your code creates an array, for a context or a function return, build the items in
the shape you declared.

A list of single values:

```ts
const tags = ['recycled', 'handmade'];
```

A list of structured objects:

```ts
const features = [{ title: 'Recycled materials' }, { title: 'Free returns' }];
```
:::
::::

## Manifest

In your manifest, declare the field with the `arrayItems` dataType:

```json
{ "dataType": "arrayItems" }
```

The declaration also defines the item shape, which becomes the runtime element type. A
data property nests that shape under `dataItem` for a single value or `data` for a
structured object. A context item or a function nests it under `item`.

### Declaration

Declare an `arrayItems` field in one of these ways, depending on where the value comes
from.

::::tabs
:::Data-property
Declare it as a data property when the Wix user builds the list in a panel. Optionally cap
the length with `maxSize`.

A list of single values uses `dataItem`:

```json
{
  "tags": {
    "dataType": "arrayItems",
    "displayName": "Tags",
    "arrayItems": {
      "dataItem": { "dataType": "text" },
      "maxSize": 10
    }
  }
}
```

A list of structured objects uses `data`:

```json
{
  "features": {
    "dataType": "arrayItems",
    "displayName": "Features",
    "arrayItems": {
      "data": {
        "items": {
          "title": { "dataType": "text", "displayName": "Title" }
        }
      },
      "maxSize": 6
    }
  }
}
```
:::
:::Context-item
Declare it as a context item when your component supplies the list to descendant
components.

A list of single values:

```json
{
  "tags": {
    "dataType": "arrayItems",
    "displayName": "Tags",
    "arrayItems": {
      "item": { "dataType": "text" }
    }
  }
}
```

A list of structured objects:

```json
{
  "features": {
    "dataType": "arrayItems",
    "displayName": "Features",
    "arrayItems": {
      "item": {
        "dataType": "data",
        "data": {
          "items": {
            "title": { "dataType": "text", "displayName": "Title" }
          }
        }
      }
    }
  }
}
```
:::
:::Function-parameter-and-return
Declare it on a function when the function accepts or returns a list.

A list of single values:

```json
{
  "parameters": [
    {
      "dataType": "arrayItems",
      "displayName": "Tags",
      "arrayItems": { "item": { "dataType": "text" } }
    }
  ],
  "returns": {
    "dataType": "arrayItems",
    "arrayItems": { "item": { "dataType": "text" } }
  }
}
```

A list of structured objects:

```json
{
  "parameters": [
    {
      "dataType": "arrayItems",
      "displayName": "Features",
      "arrayItems": {
        "item": {
          "dataType": "data",
          "data": {
            "items": {
              "title": { "dataType": "text", "displayName": "Title" }
            }
          }
        }
      }
    }
  ],
  "returns": {
    "dataType": "arrayItems",
    "arrayItems": {
      "item": {
        "dataType": "data",
        "data": {
          "items": {
            "title": { "dataType": "text", "displayName": "Title" }
          }
        }
      }
    }
  }
}
```
:::
::::