Array

Overview

The Array property is used to create multiple items with the same structure but different values. This is ideal for lists where every item follows a consistent format—such as checklists or collections of useful links.

Usage in a workflow

In a workflow, adding items to an array is as simple as clicking the + button next to the array title. Each added item conforms to the defined structure, and the order in which you add them determines their display order.

Usage in a block template

In a block template, you can define the array property like any other property. The properties to fill out are:

• Title: The title of the array shown in the block editor.
• Description: The description of the array shown in the block editor (optional).
• Type: Select array from the dropdown.
• Key: The key of the array of items. This key is used to access the array items in your application.
• Items: The individual items in the array. Each item can be any type except for another array.

Example implementation

In this example, we’ll create a list where each link has a title and a URL.

type Props = {
  links: {
    title: string;
    url: string;
  }[];
};
 
export const LinksList = ({ links }: Props): JSX.Element => {
  return (
    <ul>
      <p className="font-semibold">Links:</p>
      {links.map((item) => (
        <li className="list-disc text-blue-500 underline" key={item.title}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
};