useFieldArrayState

The useFieldArrayState hook 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 [domains, setDomains] = useState(['diallink.com']);

  const { items, appendItem, removeItem, updateItem } = useFieldArrayState({
    value: domains,
    onChange: (domains) => setDomains(domains)
  });

  return (
    <div role="group" aria-labelledby="shipping_head">
      <div id="shipping_head">Domains</div>
      {items.map(({ key, value }, index) => (
        <div key={key}>
          <TextField
            aria-label={`domain ${index + 1}`}
            value={value}
            onChange={(value) => {
              if (value || items.length === index + 1) {
                updateItem({ key, value });
              } else {
                removeItem(key);
              }
            }}
          />
          <Button
            variant="text"
            iconName="XMarkIcon"
            iconVariant="outline"
            onPress={() => removeItem(key)}
          />
        </div>
      ))}
      <Button
        variant="text"
        iconName="PlusIcon"
        iconVariant="outline"
        onPress={() => appendItem('')}
      >
        Add
      </Button>
    </div>
  );
}

function Example() {
  const [domains, setDomains] = useState(['diallink.com']);

  const { items, appendItem, removeItem, updateItem } =
    useFieldArrayState({
      value: domains,
      onChange: (domains) => setDomains(domains)
    });

  return (
    <div role="group" aria-labelledby="shipping_head">
      <div id="shipping_head">Domains</div>
      {items.map(({ key, value }, index) => (
        <div key={key}>
          <TextField
            aria-label={`domain ${index + 1}`}
            value={value}
            onChange={(value) => {
              if (value || items.length === index + 1) {
                updateItem({ key, value });
              } else {
                removeItem(key);
              }
            }}
          />
          <Button
            variant="text"
            iconName="XMarkIcon"
            iconVariant="outline"
            onPress={() => removeItem(key)}
          />
        </div>
      ))}
      <Button
        variant="text"
        iconName="PlusIcon"
        iconVariant="outline"
        onPress={() => appendItem('')}
      >
        Add
      </Button>
    </div>
  );
}

function Example() {
  const [
    domains,
    setDomains
  ] = useState([
    'diallink.com'
  ]);

  const {
    items,
    appendItem,
    removeItem,
    updateItem
  } = useFieldArrayState(
    {
      value: domains,
      onChange: (
        domains
      ) =>
        setDomains(
          domains
        )
    }
  );

  return (
    <div
      role="group"
      aria-labelledby="shipping_head"
    >
      <div id="shipping_head">
        Domains
      </div>
      {items.map((
        { key, value },
        index
      ) => (
        <div key={key}>
          <TextField
            aria-label={`domain ${
              index + 1
            }`}
            value={value}
            onChange={(
              value
            ) => {
              if (
                value ||
                items
                    .length ===
                  index +
                    1
              ) {
                updateItem(
                  {
                    key,
                    value
                  }
                );
              } else {
                removeItem(
                  key
                );
              }
            }}
          />
          <Button
            variant="text"
            iconName="XMarkIcon"
            iconVariant="outline"
            onPress={() =>
              removeItem(
                key
              )}
          />
        </div>
      ))}
      <Button
        variant="text"
        iconName="PlusIcon"
        iconVariant="outline"
        onPress={() =>
          appendItem('')}
      >
        Add
      </Button>
    </div>
  );
}