> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: ArrayItems

## Article: ArrayItems

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/reference/array-items.md

## Article Content:

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" }
          }
        }
      }
    }
  }
}
```
:::
::::