FieldArray

The FieldArray component helps you to create dynamic lists of fields. The component provides your component with various methods to manipulate the field array state and generates consistent unique keys for each of the individual field array element.

Features

Anatomy

Example

function Example() {
  const [fruits, setFruits] = useState(['Apple']);

  return (
    <>
      <FieldArray
        label="Fruits"
        defaultValue={fruits}
        variant="accentuate"
        onChange={(fruits) => setFruits(fruits)}
      >
        {({ items, appendItem, updateItem, removeItem }) => (
          <>
            {items.map(({ value, key }, index) => (
              <Track key={key}>
                <TextField
                  autoFocus
                  aria-label={`fruit ${index + 1}`}
                  value={value}
                  onChange={(value) => updateItem({ key, value })}
                />
                <Button
                  aria-label={`remove ${value}`}
                  iconName="XMarkIcon"
                  onPress={() => removeItem(key)}
                  slotName="removeButton"
                />
              </Track>
            ))}
            <Button
              variant="text"
              iconName="PlusIcon"
              iconVariant="outline"
              onPress={() => appendItem('')}
            >
              Add Fruit
            </Button>
          </>
        )}
      </FieldArray>
      <div>value: [{fruits.filter(Boolean).join(', ')}]</div>
    </>
  );
}

function Example() {
  const [fruits, setFruits] = useState(['Apple']);

  return (
    <>
      <FieldArray
        label="Fruits"
        defaultValue={fruits}
        variant="accentuate"
        onChange={(fruits) => setFruits(fruits)}
      >
        {(
          { items, appendItem, updateItem, removeItem }
        ) => (
          <>
            {items.map(({ value, key }, index) => (
              <Track key={key}>
                <TextField
                  autoFocus
                  aria-label={`fruit ${index + 1}`}
                  value={value}
                  onChange={(value) =>
                    updateItem({ key, value })}
                />
                <Button
                  aria-label={`remove ${value}`}
                  iconName="XMarkIcon"
                  onPress={() => removeItem(key)}
                  slotName="removeButton"
                />
              </Track>
            ))}
            <Button
              variant="text"
              iconName="PlusIcon"
              iconVariant="outline"
              onPress={() => appendItem('')}
            >
              Add Fruit
            </Button>
          </>
        )}
      </FieldArray>
      <div>
        value: [{fruits.filter(Boolean).join(', ')}]
      </div>
    </>
  );
}

function Example() {
  const [
    fruits,
    setFruits
  ] = useState([
    'Apple'
  ]);

  return (
    <>
      <FieldArray
        label="Fruits"
        defaultValue={fruits}
        variant="accentuate"
        onChange={(
          fruits
        ) =>
          setFruits(
            fruits
          )}
      >
        {(
          {
            items,
            appendItem,
            updateItem,
            removeItem
          }
        ) => (
          <>
            {items.map((
              {
                value,
                key
              },
              index
            ) => (
              <Track
                key={key}
              >
                <TextField
                  autoFocus
                  aria-label={`fruit ${
                    index +
                    1
                  }`}
                  value={value}
                  onChange={(
                    value
                  ) =>
                    updateItem(
                      {
                        key,
                        value
                      }
                    )}
                />
                <Button
                  aria-label={`remove ${value}`}
                  iconName="XMarkIcon"
                  onPress={() =>
                    removeItem(
                      key
                    )}
                  slotName="removeButton"
                />
              </Track>
            ))}
            <Button
              variant="text"
              iconName="PlusIcon"
              iconVariant="outline"
              onPress={() =>
                appendItem(
                  ''
                )}
            >
              Add Fruit
            </Button>
          </>
        )}
      </FieldArray>
      <div>
        value: [{fruits
          .filter(
            Boolean
          ).join(', ')}]
      </div>
    </>
  );
}