From b86d0f97ca940863fe0bf913d46c409e538ca52f Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <sven@maykinmedia.nl>
Date: Fri, 12 May 2023 16:56:31 +0200
Subject: [PATCH 1/5] :sparkles: #43 - Add support for multiple.

---
 src/containers/index.ts                       |  1 +
 src/containers/multiple/index.ts              |  1 +
 .../multiple/multiple.container.tsx           | 93 +++++++++++++++++++
 src/containers/multiple/multiple.stories.tsx  | 64 +++++++++++++
 src/lib/renderer/renderer.tsx                 | 76 ++++++++++++---
 src/types/componentprops.d.ts                 | 12 +--
 src/types/config.d.ts                         | 17 ++++
 tsconfig.json                                 |  1 +
 8 files changed, 247 insertions(+), 18 deletions(-)
 create mode 100644 src/containers/index.ts
 create mode 100644 src/containers/multiple/index.ts
 create mode 100644 src/containers/multiple/multiple.container.tsx
 create mode 100644 src/containers/multiple/multiple.stories.tsx

diff --git a/src/containers/index.ts b/src/containers/index.ts
new file mode 100644
index 0000000..e6a6634
--- /dev/null
+++ b/src/containers/index.ts
@@ -0,0 +1 @@
+export * from './multiple';
diff --git a/src/containers/multiple/index.ts b/src/containers/multiple/index.ts
new file mode 100644
index 0000000..16bc0aa
--- /dev/null
+++ b/src/containers/multiple/index.ts
@@ -0,0 +1 @@
+export * from './multiple.container';
diff --git a/src/containers/multiple/multiple.container.tsx b/src/containers/multiple/multiple.container.tsx
new file mode 100644
index 0000000..0cc96b6
--- /dev/null
+++ b/src/containers/multiple/multiple.container.tsx
@@ -0,0 +1,93 @@
+import {Component, Description, Label} from '@components';
+import {IRenderable, RenderComponent} from '@lib/renderer';
+import {IComponentProps, Values} from '@types';
+import {ComponentSchema} from 'formiojs';
+import React, {useState} from 'react';
+
+export interface IMultipleComponent extends ComponentSchema {
+  type: string;
+}
+
+export interface IMultipleProps extends IComponentProps {
+  component: IMultipleComponent;
+  value: Values;
+}
+
+/**
+ * Implements `multiple: true` behaviour.
+ *
+ * Provide a thin wrapper around a component with controls for adding multiple instances. Utilizes
+ * <RenderComponent/> to render individual instances.
+ */
+export const Multiple: React.FC<IMultipleProps> = props => {
+  const {component, form, path, value = [], setValue} = props; // FIXME: Awaits future pr.
+  const [keys, setKeys] = useState<number[]>(Array.from({length: 1}, (_, i) => i));
+
+  /** Finds next key by increasing the max key with 1. */
+  const getKey = (): number => {
+    if (!keys.length) {
+      return 0;
+    }
+    const max = Math.max(...keys);
+    return max + 1;
+  };
+
+  /** Add item. */
+  const add = () => {
+    setKeys([...keys, getKey()]);
+  };
+
+  /** Remove item at index. */
+  const remove = (index: number) => {
+    const _keys = keys.filter((_, i) => i !== index);
+    const val = value.filter((_, i) => i !== index);
+    setKeys(_keys);
+    setValue(path, val);
+  };
+
+  /** Renders individual components utilizing <RenderComponent/>. */
+  const renderComponents = () =>
+    Array.from({length: keys.length}, (_, index) => {
+      // Clone and adjust component to fit nested needs.
+      const renderable: IRenderable = {
+        ...structuredClone(component),
+        key: `${path}.${index}`, // Trigger Formik array values.
+        multiple: false, // Handled by <Multiple/>
+        description: '', // One description rendered for all components.
+        label: '', // One label rendered for all components.
+      };
+
+      return (
+        <tr key={keys[index]}>
+          <td>
+            <RenderComponent component={renderable} form={form} path={path} value={value[index]} />
+          </td>
+          <td>
+            <button onClick={() => remove(index)} aria-controls={renderable.key}>
+              Remove item
+            </button>
+          </td>
+        </tr>
+      );
+    });
+
+  return (
+    <Component {...props}>
+      <Label {...props} />
+      <table>
+        <tbody>{renderComponents()}</tbody>
+        <tfoot>
+          <tr>
+            <td>
+              <button type="button" onClick={() => add()}>
+                Add another
+              </button>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+      <table />
+      <Description {...props} />
+    </Component>
+  );
+};
diff --git a/src/containers/multiple/multiple.stories.tsx b/src/containers/multiple/multiple.stories.tsx
new file mode 100644
index 0000000..1c77a52
--- /dev/null
+++ b/src/containers/multiple/multiple.stories.tsx
@@ -0,0 +1,64 @@
+import {DEFAULT_RENDER_CONFIGURATION, RenderForm} from '@lib/renderer';
+import {expect} from '@storybook/jest';
+import type {ComponentStory, Meta} from '@storybook/react';
+import {userEvent, within} from '@storybook/testing-library';
+
+import {Multiple} from './multiple.container';
+
+const meta: Meta<typeof Multiple> = {
+  title: 'Containers / Multiple',
+  component: Multiple,
+  decorators: [],
+  parameters: {},
+};
+export default meta;
+
+export const multipleTextfields: ComponentStory<typeof RenderForm> = args => (
+  <RenderForm {...args} />
+);
+multipleTextfields.args = {
+  configuration: DEFAULT_RENDER_CONFIGURATION,
+  form: {
+    display: 'form',
+    components: [
+      {
+        type: 'textfield',
+        key: 'multiple-inputs',
+        description: 'Array of strings instead of a single string value',
+        label: 'Multiple inputs',
+        multiple: true,
+      },
+    ],
+  },
+  initialValues: {
+    'multiple-inputs': ['first value'],
+  },
+  onSubmit: () => {},
+};
+multipleTextfields.play = async ({canvasElement}) => {
+  const canvas = within(canvasElement);
+
+  // check that new items can be added
+  await userEvent.click(canvas.getByRole('button', {name: 'Add another'}));
+  const input1 = await canvas.getAllByRole('textbox')[0];
+  expect(input1).toHaveDisplayValue('first value');
+  await userEvent.clear(input1);
+  await userEvent.type(input1, 'Foo');
+  expect(input1).toHaveDisplayValue('Foo');
+
+  const input2 = await canvas.getAllByRole('textbox')[1];
+  expect(input2).toHaveDisplayValue('');
+
+  // the label & description should be rendered only once, even with > 1 inputs
+  expect(canvas.queryAllByText('Multiple inputs')).toHaveLength(1);
+  expect(canvas.queryAllByText('Array of strings instead of a single string value')).toHaveLength(
+    1
+  );
+
+  // finally, it should be possible delete rows again
+  const removeButtons = await canvas.findAllByRole('button', {name: 'Remove item'});
+  expect(removeButtons).toHaveLength(2);
+  await userEvent.click(removeButtons[0]);
+  expect(await canvas.getAllByRole('textbox')[0]).toHaveDisplayValue('');
+  expect(await canvas.getAllByRole('textbox')).toHaveLength(1);
+};
diff --git a/src/lib/renderer/renderer.tsx b/src/lib/renderer/renderer.tsx
index 797aa0a..74796e4 100644
--- a/src/lib/renderer/renderer.tsx
+++ b/src/lib/renderer/renderer.tsx
@@ -1,6 +1,7 @@
 import {Column, Columns, Content, IColumnProps, TextField} from '@components';
+import {Multiple} from '@containers';
 import {DEFAULT_VALIDATORS, getFormErrors} from '@lib/validation';
-import {IComponentProps, IFormioForm, IRenderConfiguration, IValues} from '@types';
+import {IComponentProps, IFormioForm, IRenderConfiguration, IValues, Value, Values} from '@types';
 import {Formik, useField, useFormikContext} from 'formik';
 import {FormikHelpers} from 'formik/dist/types';
 import {Utils} from 'formiojs';
@@ -14,6 +15,9 @@ export const DEFAULT_RENDER_CONFIGURATION: IRenderConfiguration = {
     content: Content,
     textfield: TextField,
   },
+  containers: {
+    multiple: Multiple,
+  },
   validators: DEFAULT_VALIDATORS,
 };
 
@@ -87,10 +91,18 @@ export const RenderForm: React.FC<IRenderFormProps> = ({
   initialValues = {},
   onSubmit,
 }) => {
-  const childComponents =
-    form.components?.map((c: IRenderable) => (
-      <RenderComponent key={`${c.id}-${c.key}`} component={c} form={form} />
-    )) || null;
+  const childComponents: React.ReactElement[] = [];
+  // TODO: Refactor types
+  Utils.eachComponent(
+    form.components,
+    (c: IRenderable, path: string) => {
+      const component = (
+        <RenderComponent key={`${c.id}-${c.key}`} component={c} form={form} path={path} />
+      );
+      childComponents.push(component);
+    },
+    true
+  );
 
   return (
     <RenderContext.Provider value={configuration}>
@@ -115,6 +127,8 @@ export const RenderForm: React.FC<IRenderFormProps> = ({
 export interface IRenderComponentProps {
   component: IRenderable;
   form: IFormioForm;
+  path: string;
+  value?: Value | Values;
 }
 
 /**
@@ -143,9 +157,14 @@ export interface IRenderComponentProps {
  * @external {FormikContext} Expects `Formik`/`FormikContext` to be available.
  * @external {RenderContext} Expects `RenderContext` to be available.
  */
-export const RenderComponent: React.FC<IRenderComponentProps> = ({component, form}) => {
-  const {setFieldValue, values} = useFormikContext();
+export const RenderComponent: React.FC<IRenderComponentProps> = ({
+  component,
+  form,
+  path,
+  value = undefined,
+}) => {
   const key = component.key || OF_MISSING_KEY;
+  const {setFieldValue, values} = useFormikContext();
   const Component = useComponentType(component);
   const field = useField(key);
 
@@ -162,7 +181,11 @@ export const RenderComponent: React.FC<IRenderComponentProps> = ({component, for
     return null;
   }
 
-  const [{value, onBlur, onChange}, {error}] = field;
+  const [{onBlur, onChange}, {error}] = field;
+
+  // Allow the value to be overriden.
+  const _value = value !== undefined ? value : field[0].value;
+
   const callbacks = {onBlur, onChange};
   const errors = error?.split('\n') || []; // Reconstruct array.
 
@@ -177,7 +200,7 @@ export const RenderComponent: React.FC<IRenderComponentProps> = ({component, for
 
   // Regular children, either from component or column.
   const childComponents = cComponents?.map(c => (
-    <RenderComponent key={`${c.id}-${c.key}`} component={c} form={form} />
+    <RenderComponent key={`${c.id}-${c.key}`} component={c} form={form} path={path} />
   ));
 
   // Columns from component.
@@ -190,12 +213,21 @@ export const RenderComponent: React.FC<IRenderComponentProps> = ({component, for
         type: 'column',
       }}
       form={form}
+      path={path}
     />
   ));
 
   // Return the component, pass children.
   return (
-    <Component callbacks={callbacks} component={component} errors={errors} value={value}>
+    <Component
+      callbacks={callbacks}
+      component={component}
+      form={form}
+      errors={errors}
+      path={path}
+      value={_value}
+      setValue={setFieldValue}
+    >
       {childComponents || childColumns}
     </Component>
   );
@@ -209,13 +241,33 @@ export const RenderComponent: React.FC<IRenderComponentProps> = ({component, for
 const Fallback = (props: IComponentProps) => <React.Fragment>{props.children}</React.Fragment>;
 
 /**
- * Custom hook resolving the `React.ComponentType` from `RenderContext`.
+ * Custom hook resolving the `React.ComponentType` based on the configuration in `RenderContext`.
+ * Resolving is performed in the following order:
+ *
+ *   1. - A `React.ComponentType` configured for a certain "containers" entry indicating an internal
+ *        edge case.
+ *   2. - A `React.ComponentType` configured for a certain "components" entry indicating a regular
+ *        component.
+ *   3. - A fallback component solely rendering `props.children`.
  * @external {RenderContext} Expects `RenderContext` to be available.
  */
 export const useComponentType = (
   component: IRenderable
 ): React.ComponentType<IColumnProps | IComponentProps> => {
   const renderConfiguration = useContext(RenderContext);
+  const ContainerType = useContainerConfiguration(component);
   const ComponentType = renderConfiguration.components[component.type];
-  return ComponentType || Fallback;
+  return ContainerType || ComponentType || Fallback;
+};
+
+/**
+ * Returns the applicable `containerConfiguration` (if any) for component.
+ * @see {IContainerConfiguration}
+ */
+export const useContainerConfiguration = (component: IRenderable) => {
+  const renderConfiguration = useContext(RenderContext);
+  if (component.multiple) {
+    return renderConfiguration.containers.multiple || null;
+  }
+  return null;
 };
diff --git a/src/types/componentprops.d.ts b/src/types/componentprops.d.ts
index cd42247..4930b5a 100644
--- a/src/types/componentprops.d.ts
+++ b/src/types/componentprops.d.ts
@@ -2,16 +2,16 @@ import {ComponentSchema} from 'formiojs';
 import React from 'react';
 
 import {ICallbackConfiguration} from './config';
+import {IFormioForm} from './form';
 import {Value, Values} from './value';
 
-interface IComponentProps {
+export interface IComponentProps {
   callbacks: ICallbackConfiguration;
-
-  children?: React.ReactNode;
-
   component: ComponentSchema;
-
   errors: string[];
-
+  form: IFormioForm;
   value: Value | Values | undefined;
+  path: string;
+  setValue: (field: string, value: any, shouldValidate?: boolean) => void;
+  children?: React.ReactNode;
 }
diff --git a/src/types/config.d.ts b/src/types/config.d.ts
index 0718d3b..f17730f 100644
--- a/src/types/config.d.ts
+++ b/src/types/config.d.ts
@@ -1,4 +1,5 @@
 import {IColumnProps} from '@components';
+import {IRenderable} from '@lib/renderer';
 import {validator} from '@lib/validation';
 import React from 'react';
 
@@ -6,6 +7,7 @@ import {IComponentProps} from './componentprops';
 
 export interface IRenderConfiguration {
   components: IComponentConfiguration;
+  containers: IContainerConfiguration;
   validators: validator[];
 }
 
@@ -22,6 +24,21 @@ export interface ICallbackConfiguration {
 
 export type callback = (e: Event | React.BaseSyntheticEvent) => void;
 
+/**
+ * Describes a mapping between a component type (`ComponentSchema.type`) and a (React) component to
+ * render.
+ * @example `{type: "textfield"}` -> <TextField/>
+ */
 export interface IComponentConfiguration {
   [index: string]: React.ComponentType<IColumnProps | IComponentProps>;
 }
+
+/**
+ * Describes a mapping between an (internal) container type and a (React) component to render. The
+ * internal container type is not directly linked to a specific key in `ComponentSchema` but may be
+ * referenced directly by the renderer based specific conditions.
+ * @example `{multiple: "true"}` -> <Multiple/>
+ */
+export interface IContainerConfiguration {
+  [index: string]: React.ComponentType<IColumnProps | IComponentProps>;
+}
diff --git a/tsconfig.json b/tsconfig.json
index bf43f33..e9a8caa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,6 +21,7 @@
     "paths": {
       "@components": ["src/components/index"],
       "@components/*": ["src/components/*"],
+      "@containers": ["src/containers/index"],
       "@fixtures": ["src/fixtures/index"],
       "@lib/*": ["src/lib/*"],
       "@types": ["src/types/index"]

From 2d6f8cc0f68c0571047c903f34bf34d24f3d477c Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <sven@maykinmedia.nl>
Date: Fri, 2 Jun 2023 14:40:09 +0200
Subject: [PATCH 2/5] :ok_hand: #43 - PR feedback.

---
 src/containers/multiple/multiple.container.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/containers/multiple/multiple.container.tsx b/src/containers/multiple/multiple.container.tsx
index 0cc96b6..35a6c9d 100644
--- a/src/containers/multiple/multiple.container.tsx
+++ b/src/containers/multiple/multiple.container.tsx
@@ -21,7 +21,7 @@ export interface IMultipleProps extends IComponentProps {
  */
 export const Multiple: React.FC<IMultipleProps> = props => {
   const {component, form, path, value = [], setValue} = props; // FIXME: Awaits future pr.
-  const [keys, setKeys] = useState<number[]>(Array.from({length: 1}, (_, i) => i));
+  const [keys, setKeys] = useState<number[]>([0]);
 
   /** Finds next key by increasing the max key with 1. */
   const getKey = (): number => {
@@ -47,7 +47,7 @@ export const Multiple: React.FC<IMultipleProps> = props => {
 
   /** Renders individual components utilizing <RenderComponent/>. */
   const renderComponents = () =>
-    Array.from({length: keys.length}, (_, index) => {
+    keys.map((key, index) => {
       // Clone and adjust component to fit nested needs.
       const renderable: IRenderable = {
         ...structuredClone(component),
@@ -58,7 +58,7 @@ export const Multiple: React.FC<IMultipleProps> = props => {
       };
 
       return (
-        <tr key={keys[index]}>
+        <tr key={key}>
           <td>
             <RenderComponent component={renderable} form={form} path={path} value={value[index]} />
           </td>
@@ -79,7 +79,7 @@ export const Multiple: React.FC<IMultipleProps> = props => {
         <tfoot>
           <tr>
             <td>
-              <button type="button" onClick={() => add()}>
+              <button type="button" onClick={add}>
                 Add another
               </button>
             </td>

From dfa63b50a8940583033e95454912a56b59c4a80e Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <sven@maykinmedia.nl>
Date: Tue, 6 Jun 2023 10:01:03 +0200
Subject: [PATCH 3/5] :recycle: #43 - Refactor validation to suit multiple.

---
 package.json                                  |   3 +-
 .../formio/textfield/textfield.component.tsx  |   2 +-
 .../utils/errors/errors.component.tsx         |   7 +-
 .../utils/errors/errors.stories.tsx           |   6 +-
 .../multiple/multiple.container.tsx           |   6 +-
 src/containers/multiple/multiple.stories.tsx  |  54 ++++++-
 src/lib/renderer/renderer.tsx                 |   8 +-
 src/lib/validation/validate.ts                | 145 +++++++++---------
 src/lib/validation/validators/maxlength.ts    |   2 +-
 src/lib/validation/validators/minlength.ts    |   2 +-
 src/lib/validation/validators/pattern.ts      |   2 +-
 src/lib/validation/validators/required.ts     |   2 +-
 .../custom-component.stories.tsx              |  10 +-
 src/types/componentprops.d.ts                 |   3 +-
 src/types/config.d.ts                         |   4 +-
 15 files changed, 157 insertions(+), 99 deletions(-)

diff --git a/package.json b/package.json
index 0f4a0cd..d3155f5 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,8 @@
   },
   "dependencies": {
     "clsx": "^1.2.1",
-    "formik": "^2.2.9"
+    "formik": "^2.2.9",
+    "lodash": "^4.17.21"
   },
   "resolutions": {
     "react-formio/formiojs": "~4.13.0"
diff --git a/src/components/formio/textfield/textfield.component.tsx b/src/components/formio/textfield/textfield.component.tsx
index 0bdd46e..9cb8b24 100644
--- a/src/components/formio/textfield/textfield.component.tsx
+++ b/src/components/formio/textfield/textfield.component.tsx
@@ -62,7 +62,7 @@ export const TextField: React.FC<ITextFieldProps> = ({callbacks, component, valu
         {..._callbacks}
       />
 
-      {!pristineState && component.showCharCount && <CharCount value={value} />}
+      {!pristineState && component.showCharCount && value && <CharCount value={value} />}
       {component.description && <Description description={component.description} />}
       {!pristineState && errors?.length > 0 && <Errors componentId={componentId} errors={errors} />}
     </Component>
diff --git a/src/components/utils/errors/errors.component.tsx b/src/components/utils/errors/errors.component.tsx
index 2d940ae..145db5a 100644
--- a/src/components/utils/errors/errors.component.tsx
+++ b/src/components/utils/errors/errors.component.tsx
@@ -1,9 +1,10 @@
+import {ValidationError} from '@lib/validation';
 import clsx from 'clsx';
 import React from 'react';
 
 export interface IErrorsProps {
   componentId: string;
-  errors: string[];
+  errors: ValidationError[];
 }
 
 /**
@@ -16,11 +17,11 @@ export const Errors: React.FC<IErrorsProps> = ({componentId, errors}) => {
 
   return (
     <ul className={className} aria-describedby={componentId}>
-      {errors?.map((error: string, index: number) => {
+      {errors?.map((error, index: number) => {
         return (
           <li key={index} className={listItemClassName}>
             <label className={labelClassName} htmlFor={componentId} role="alert">
-              {error}
+              {error.message}
             </label>
           </li>
         );
diff --git a/src/components/utils/errors/errors.stories.tsx b/src/components/utils/errors/errors.stories.tsx
index fa951d8..6e0717c 100644
--- a/src/components/utils/errors/errors.stories.tsx
+++ b/src/components/utils/errors/errors.stories.tsx
@@ -13,7 +13,11 @@ export default meta;
 
 export const errors: ComponentStory<typeof Errors> = args => <Errors {...args} />;
 errors.args = {
-  errors: ['Postcode is required', 'Postcode does not match the pattern ^\\d{4}\\s?[a-zA-Z]{2}$'],
+  // errors: [{message: 'Postcode is required'}, {message: 'Postcode does not match the pattern ^\\d{4}\\s?[a-zA-Z]{2}$'}],
+  errors: [
+    {name: 'required', message: 'Postcode is required'},
+    {name: 'pattern', message: 'Postcode does not match the pattern ^\\d{4}\\s?[a-zA-Z]{2}$'},
+  ],
 };
 errors.play = async ({canvasElement}) => {
   const canvas = within(canvasElement);
diff --git a/src/containers/multiple/multiple.container.tsx b/src/containers/multiple/multiple.container.tsx
index 35a6c9d..1b722d6 100644
--- a/src/containers/multiple/multiple.container.tsx
+++ b/src/containers/multiple/multiple.container.tsx
@@ -73,7 +73,9 @@ export const Multiple: React.FC<IMultipleProps> = props => {
 
   return (
     <Component {...props}>
-      <Label {...props} />
+      {props.component.label && (
+        <Label label={props.component.label} componentId={props.component.key as string} />
+      )}
       <table>
         <tbody>{renderComponents()}</tbody>
         <tfoot>
@@ -87,7 +89,7 @@ export const Multiple: React.FC<IMultipleProps> = props => {
         </tfoot>
       </table>
       <table />
-      <Description {...props} />
+      {props.component.description && <Description description={props.component.description} />}
     </Component>
   );
 };
diff --git a/src/containers/multiple/multiple.stories.tsx b/src/containers/multiple/multiple.stories.tsx
index 1c77a52..637aee5 100644
--- a/src/containers/multiple/multiple.stories.tsx
+++ b/src/containers/multiple/multiple.stories.tsx
@@ -1,7 +1,7 @@
 import {DEFAULT_RENDER_CONFIGURATION, RenderForm} from '@lib/renderer';
 import {expect} from '@storybook/jest';
 import type {ComponentStory, Meta} from '@storybook/react';
-import {userEvent, within} from '@storybook/testing-library';
+import {userEvent, waitFor, within} from '@storybook/testing-library';
 
 import {Multiple} from './multiple.container';
 
@@ -27,13 +27,18 @@ multipleTextfields.args = {
         description: 'Array of strings instead of a single string value',
         label: 'Multiple inputs',
         multiple: true,
+        showCharCount: true,
+        validate: {
+          required: true,
+          maxLength: 3,
+          minLength: 1,
+        },
       },
     ],
   },
   initialValues: {
     'multiple-inputs': ['first value'],
   },
-  onSubmit: () => {},
 };
 multipleTextfields.play = async ({canvasElement}) => {
   const canvas = within(canvasElement);
@@ -62,3 +67,48 @@ multipleTextfields.play = async ({canvasElement}) => {
   expect(await canvas.getAllByRole('textbox')[0]).toHaveDisplayValue('');
   expect(await canvas.getAllByRole('textbox')).toHaveLength(1);
 };
+
+export const multipleTextfieldsWithValidation: ComponentStory<typeof RenderForm> = args => (
+  <RenderForm {...args} />
+);
+multipleTextfieldsWithValidation.args = {
+  configuration: DEFAULT_RENDER_CONFIGURATION,
+  form: {
+    display: 'form',
+    components: [
+      {
+        type: 'textfield',
+        key: 'multiple-inputs',
+        description: 'Array of strings instead of a single string value',
+        label: 'Multiple inputs',
+        multiple: true,
+        showCharCount: true,
+        validate: {
+          required: true,
+        },
+      },
+    ],
+  },
+  initialValues: {
+    'multiple-inputs': ['first value'],
+  },
+};
+multipleTextfieldsWithValidation.play = async ({canvasElement}) => {
+  const canvas = within(canvasElement);
+
+  // check that new items can be added
+  await userEvent.click(canvas.getByRole('button', {name: 'Add another'}));
+  const input1 = await canvas.getAllByRole('textbox')[0];
+  const input2 = await canvas.getAllByRole('textbox')[1];
+
+  await userEvent.type(input1, 'foo', {delay: 300});
+  await userEvent.type(input2, 'bar', {delay: 300});
+
+  await userEvent.clear(input1);
+  expect(await canvas.findAllByText('Multiple inputs is required')).toHaveLength(1);
+
+  await userEvent.clear(input2);
+  waitFor(async () => {
+    expect(await canvas.findAllByText('Multiple inputs is required')).toHaveLength(2);
+  });
+};
diff --git a/src/lib/renderer/renderer.tsx b/src/lib/renderer/renderer.tsx
index 74796e4..2935052 100644
--- a/src/lib/renderer/renderer.tsx
+++ b/src/lib/renderer/renderer.tsx
@@ -1,6 +1,6 @@
 import {Column, Columns, Content, IColumnProps, TextField} from '@components';
 import {Multiple} from '@containers';
-import {DEFAULT_VALIDATORS, getFormErrors} from '@lib/validation';
+import {DEFAULT_VALIDATORS, ValidationError, getFormErrors} from '@lib/validation';
 import {IComponentProps, IFormioForm, IRenderConfiguration, IValues, Value, Values} from '@types';
 import {Formik, useField, useFormikContext} from 'formik';
 import {FormikHelpers} from 'formik/dist/types';
@@ -109,7 +109,7 @@ export const RenderForm: React.FC<IRenderFormProps> = ({
       <Formik
         initialValues={initialValues}
         onSubmit={onSubmit}
-        validate={values => getFormErrors(form, values, configuration.validators)}
+        validate={async values => await getFormErrors(form, values, configuration.validators)}
       >
         {props => {
           return (
@@ -182,12 +182,12 @@ export const RenderComponent: React.FC<IRenderComponentProps> = ({
   }
 
   const [{onBlur, onChange}, {error}] = field;
+  const errors = error || [];
 
   // Allow the value to be overriden.
   const _value = value !== undefined ? value : field[0].value;
 
   const callbacks = {onBlur, onChange};
-  const errors = error?.split('\n') || []; // Reconstruct array.
 
   // In certain cases a component (is not defined as) a component but something else (e.g. a column)
   // We deal with these edge cases by extending the schema with a custom (component) type allowing
@@ -223,7 +223,7 @@ export const RenderComponent: React.FC<IRenderComponentProps> = ({
       callbacks={callbacks}
       component={component}
       form={form}
-      errors={errors}
+      errors={errors as unknown as ValidationError[]} // Formik typing issue.
       path={path}
       value={_value}
       setValue={setFieldValue}
diff --git a/src/lib/validation/validate.ts b/src/lib/validation/validate.ts
index fb23cdd..3100baf 100644
--- a/src/lib/validation/validate.ts
+++ b/src/lib/validation/validate.ts
@@ -9,8 +9,9 @@ import {
 import {IFormioForm, IValues, Value, Values} from '@types';
 import {FormikErrors} from 'formik';
 import {ExtendedComponentSchema, Utils} from 'formiojs';
+import _ from 'lodash';
 
-export type validator = [
+export type Validator = [
   (
     ExtendedComponentSchema: ExtendedComponentSchema,
     value: Value,
@@ -20,19 +21,13 @@ export type validator = [
   string
 ];
 
-export const DEFAULT_VALIDATORS: validator[] = [
+export const DEFAULT_VALIDATORS: Validator[] = [
   [validateMaxLength, '{{ label }} must have no more than {{ limit }} characters.'],
   [validateMinLength, '{{ label }} must have at least {{ limit }} characters.'],
   [validatePattern, '{{ label }} does not match the pattern {{ pattern }}'],
   [validateRequired, '{{ label }} is required'],
 ];
 
-type ErrorMap =
-  | Record<string, string>
-  | {
-      [key: string]: ErrorMap;
-    };
-
 /**
  * Validates `form` and combines errors for each component.
  * TODO: Implement "scoring/thresholds" for validators (determine what errors to show in specific cases).
@@ -41,44 +36,22 @@ type ErrorMap =
  * @param form Formio form.
  * @param values The values to validate.
  * @param validators See `validate` for more information.
- * @return A promise which resolves (`void`) if all `values` are considered valid and rejects
- * (`FormikErrors<value>`) it is considered invalid.
+ * @return A promise which resolves (`void`) if all `values` are considered valid or
+ * (`FormikErrors<IValues>`) if it is considered invalid.
  */
 export const getFormErrors = async (
   form: IFormioForm,
   values: IValues,
-  validators: validator[] = DEFAULT_VALIDATORS
+  validators: Validator[] = DEFAULT_VALIDATORS
 ): Promise<FormikErrors<IValues> | void> => {
   try {
     await validateForm(form, values, validators);
     return;
   } catch (result) {
-    const errors: FormikErrors<IValues> = {};
-    // Convert the validation errors to messages.
-    Object.entries(result).forEach(([key, validationErrors]: [string, ValidationError[]]) => {
-      const [tail, ...bits] = key.split('.').reverse();
-      let localErrorObject = errors as ErrorMap;
-      // deep-assign errors
-      bits.forEach(bit => {
-        if (!localErrorObject[bit]) {
-          localErrorObject[bit] = {};
-        }
-        localErrorObject = localErrorObject[bit] as ErrorMap;
-      });
-      const messages = validationErrors
-        .map(validationError => validationError.message.trim())
-        .join('\n');
-      localErrorObject[tail] = messages;
-    });
-    return errors;
+    return result;
   }
 };
 
-const isSingleValue = (obj: IValues | Value | Values): obj is Value => {
-  if (obj === null) return true; // typeof null === 'object'
-  return typeof obj !== 'object';
-};
-
 /**
  * Validates `form`.
  *
@@ -92,13 +65,13 @@ const isSingleValue = (obj: IValues | Value | Values): obj is Value => {
  * @param validators See `validate` for more information.
  * @throws {ValidationError[]} As promise rejection if invalid.
  * @return A promise which resolves (`void`) if all `values` are considered valid and rejects
- * (`{[index: string]: ValidationError[]}`) it is considered invalid.
+ * (`{[index: string]: ValidationError[] | ValidationError[][]}`) it is considered invalid.
  */
 export const validateForm = async (
   form: IFormioForm,
   values: IValues,
   validators = DEFAULT_VALIDATORS
-): Promise<{[index: string]: ValidationError[]} | void> => {
+): Promise<{[index: string]: ValidationError[] | ValidationError[][]} | void> => {
   const errors: {[key: string]: Error} = {};
 
   // Collect all the components in the form definition so that each components set of
@@ -111,83 +84,109 @@ export const validateForm = async (
   // Run validation for all components in the form definition
   const promises = componentsToValidate.map(async component => {
     const key = component.key || OF_MISSING_KEY;
-    // lodash.get like to support nested data structures/keys with dots
-    // TODO: works only for objects right now
-    // FIXME: types can be more complex, value of a file upload is not a scalar, but an
-    // object!
-    // FIXME: the accumulator casting is also less than ideal, it should be possible
-    // to infer this correctly.
-    const value = key.split('.').reduce((acc: Value | IValues, bit: string) => {
-      if (Array.isArray(acc)) {
-        throw new Error('Arrays not supported yet');
-      }
-      if (acc === null) return null;
-      const nestedProp = (acc as IValues)[bit];
-      if (isSingleValue(nestedProp)) {
-        return nestedProp;
-      }
-      return nestedProp;
-    }, values) as Value;
+    const valueOrValues = _.get(values, key) as Value | Values;
 
     try {
-      await validate(component, value, values, validators);
-    } catch (e) {
-      errors[key] = e;
+      await validate(component, valueOrValues, values, validators);
+    } catch (validationErrors) {
+      _.set(errors, key, validationErrors);
     }
   });
 
   await Promise.all(promises);
   if (Object.keys(errors).length) {
-    return Promise.reject(errors);
+    throw errors;
   }
-  return;
 };
 
 /**
  * Validates a component.
  *
- * Runs each function in `validators` and passing it `ExtendedComponentSchema` and `message`.
+ * Runs each function in `validators` and passing it `component`, `valueOrValues`, `message`. and
+ * `formValues`.
  * If all validators resolve a components is considered valid and the returned `Promise` resolves.
- * If not: the returned `Promise` rejects with an array of `ValidationError` (subclasses).
+ * If not: the returned `Promise` rejects with a (possibly nested) array of `ValidationError` (subclasses).
  *
- * @param ExtendedComponentSchema Formio component schema passed to each validator.
- * @param value The value to validate.
+ * @param component Formio component schema passed to each validator.
+ * @param valueOrValues The value(s) to validate.
  * @param formValues All the form values.
  *
  * @param validators An array of `async function`/`string` tuples. The function being the validator
  * function, the string a message used to indicate an invalid value. Each validator is run in order.
  *
- *  The validator function is called with `ExtendedComponentSchema`, the `value` and the error `message`.
+ *  The validator function is called with `component`, the `valueOrValues`, the 'message' and all the
+ *  `formValues`.
  *  The (async/sync) function should return a `Promise` which either resolves (valid) or rejects
  *  (invalid) with a (subclass of) `ValidationError` instantiated with `message`.
  *
- * @throws {ValidationError[]} As promise rejection if invalid.
+ * @throws {ValidationError[] | ValidationError[][]} As promise rejection if invalid.
  *
  * @return A promise which resolves (`void`) if `value` is considered valid and rejects
- * (`ValidationError[]`) it is considered invalid.
+ * (`ValidationError[] | ValidationError[][]`) it is considered invalid.
  */
 export const validate = async (
-  ExtendedComponentSchema: ExtendedComponentSchema,
-  value: Value,
+  component: ExtendedComponentSchema,
+  valueOrValues: Value | Values,
   formValues: IValues,
   validators = DEFAULT_VALIDATORS
+): Promise<void> => {
+  // Array of values (multiple), simple implementation for now.
+  if (Array.isArray(valueOrValues)) {
+    return validateValues(component, valueOrValues, formValues, validators);
+  }
+  // Single value.
+  return validateValue(component, valueOrValues, formValues, validators);
+};
+
+/**
+ * Implements validate for a multiple values.
+ * @see {validate}
+ */
+export const validateValues = async (
+  component: ExtendedComponentSchema,
+  values: Values,
+  formValues: IValues,
+  validators: Validator[]
+): Promise<void> => {
+  // Array of values (multiple) simple implementation for now.
+  const results = Array(values.length);
+  const promises = values.map((value, index) => {
+    return validateValue(component, value, formValues, validators).catch(errorsForInstance => {
+      return (results[index] = errorsForInstance);
+    });
+  });
+
+  await Promise.all(promises);
+  if (results.some(v => v)) {
+    throw results;
+  }
+};
+
+/**
+ * Implements validate for a singular value.
+ * @see {validate}
+ */
+export const validateValue = async (
+  component: ExtendedComponentSchema,
+  value: Value,
+  formValues: IValues,
+  validators: Validator[]
 ): Promise<void> => {
   // Map all validators into an array of `Promise`s, implementing a catch handler building the
   // `errors` array.
-  const errors: ValidationError[] = [];
+  const validationErrors: ValidationError[] = [];
   const promises = validators.map(async ([validatorFunction, message]) => {
     try {
-      await validatorFunction(ExtendedComponentSchema, value, message, formValues);
+      await validatorFunction(component, value, message, formValues);
     } catch (e) {
-      errors.push(e);
+      validationErrors.push({name: e.name, message: e.message});
     }
   });
 
   // Wait until all promises are completed. When so: check if the `errors` array contains items,
   // indicating that at least one validation error exists in the array.
   await Promise.all(promises);
-  if (errors.length) {
-    return Promise.reject(errors);
+  if (validationErrors.length) {
+    throw validationErrors;
   }
-  return Promise.resolve();
 };
diff --git a/src/lib/validation/validators/maxlength.ts b/src/lib/validation/validators/maxlength.ts
index 38f0b98..7841fcd 100644
--- a/src/lib/validation/validators/maxlength.ts
+++ b/src/lib/validation/validators/maxlength.ts
@@ -22,5 +22,5 @@ export const validateMaxLength = async (
 };
 
 export class MaxLengthValidationError extends ValidationError {
-  validator = 'maxlength';
+  name = 'maxlength';
 }
diff --git a/src/lib/validation/validators/minlength.ts b/src/lib/validation/validators/minlength.ts
index da3c9e9..eddf656 100644
--- a/src/lib/validation/validators/minlength.ts
+++ b/src/lib/validation/validators/minlength.ts
@@ -22,5 +22,5 @@ export const validateMinLength = async (
 };
 
 export class MinLengthValidationError extends ValidationError {
-  validator = 'minlength';
+  name = 'minlength';
 }
diff --git a/src/lib/validation/validators/pattern.ts b/src/lib/validation/validators/pattern.ts
index d54c573..fcae26f 100644
--- a/src/lib/validation/validators/pattern.ts
+++ b/src/lib/validation/validators/pattern.ts
@@ -21,5 +21,5 @@ export const validatePattern = async (
 };
 
 export class PatternValidationError extends ValidationError {
-  validator = 'pattern';
+  name = 'pattern';
 }
diff --git a/src/lib/validation/validators/required.ts b/src/lib/validation/validators/required.ts
index 83d48a0..637678f 100644
--- a/src/lib/validation/validators/required.ts
+++ b/src/lib/validation/validators/required.ts
@@ -21,5 +21,5 @@ export const validateRequired = async (
 };
 
 export class RequiredValidationError extends ValidationError {
-  validator = 'required';
+  name = 'required';
 }
diff --git a/src/tests/custom-component/custom-component.stories.tsx b/src/tests/custom-component/custom-component.stories.tsx
index 1bb69fb..1500c43 100644
--- a/src/tests/custom-component/custom-component.stories.tsx
+++ b/src/tests/custom-component/custom-component.stories.tsx
@@ -1,5 +1,5 @@
 import {DEFAULT_RENDER_CONFIGURATION, RenderForm} from '@lib/renderer';
-import {DEFAULT_VALIDATORS, validator} from '@lib/validation';
+import {DEFAULT_VALIDATORS, Validator} from '@lib/validation';
 import {expect} from '@storybook/jest';
 import type {ComponentStory, Meta} from '@storybook/react';
 import {userEvent, within} from '@storybook/testing-library';
@@ -14,7 +14,7 @@ const meta: Meta<typeof RenderForm> = {
 };
 export default meta;
 
-const VALIDATORS = DEFAULT_VALIDATORS.map(([fn, mssg], index): validator => {
+const VALIDATORS = DEFAULT_VALIDATORS.map(([fn, mssg], index): Validator => {
   if (index === 3) {
     return [fn, 'Vul het verplichte veld in'];
   }
@@ -42,9 +42,9 @@ const BootstrapInput: React.FC<IComponentProps> = ({callbacks, component, errors
         {...callbacks}
       />
 
-      {errors.map(error => (
-        <div key={error} className="invalid-feedback">
-          {error}
+      {errors.map((error, i) => (
+        <div key={i} className="invalid-feedback">
+          {error.message}
         </div>
       ))}
     </div>
diff --git a/src/types/componentprops.d.ts b/src/types/componentprops.d.ts
index 4930b5a..e046eaa 100644
--- a/src/types/componentprops.d.ts
+++ b/src/types/componentprops.d.ts
@@ -1,3 +1,4 @@
+import {ValidationError} from '@lib/validation';
 import {ComponentSchema} from 'formiojs';
 import React from 'react';
 
@@ -8,7 +9,7 @@ import {Value, Values} from './value';
 export interface IComponentProps {
   callbacks: ICallbackConfiguration;
   component: ComponentSchema;
-  errors: string[];
+  errors: ValidationError[];
   form: IFormioForm;
   value: Value | Values | undefined;
   path: string;
diff --git a/src/types/config.d.ts b/src/types/config.d.ts
index f17730f..22eb139 100644
--- a/src/types/config.d.ts
+++ b/src/types/config.d.ts
@@ -1,6 +1,6 @@
 import {IColumnProps} from '@components';
 import {IRenderable} from '@lib/renderer';
-import {validator} from '@lib/validation';
+import {Validator} from '@lib/validation';
 import React from 'react';
 
 import {IComponentProps} from './componentprops';
@@ -8,7 +8,7 @@ import {IComponentProps} from './componentprops';
 export interface IRenderConfiguration {
   components: IComponentConfiguration;
   containers: IContainerConfiguration;
-  validators: validator[];
+  validators: Validator[];
 }
 
 /**

From 45490985f0d696c8bf3e2e9bfb831e80f03dd689 Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <sven@maykinmedia.nl>
Date: Tue, 6 Jun 2023 10:43:24 +0200
Subject: [PATCH 4/5] :bug: - Fix bug with Fallback component.

---
 src/lib/renderer/renderer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/renderer/renderer.tsx b/src/lib/renderer/renderer.tsx
index 2935052..dee4e29 100644
--- a/src/lib/renderer/renderer.tsx
+++ b/src/lib/renderer/renderer.tsx
@@ -238,7 +238,7 @@ export const RenderComponent: React.FC<IRenderComponentProps> = ({
  * The Fallback component makes sure (child) components keep being rendered with as little side
  * effects as possible.
  */
-const Fallback = (props: IComponentProps) => <React.Fragment>{props.children}</React.Fragment>;
+const Fallback = () => <React.Fragment />;
 
 /**
  * Custom hook resolving the `React.ComponentType` based on the configuration in `RenderContext`.

From e9506c6c3a722afd88d38dd8fbd7b53208b2b413 Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <sven@maykinmedia.nl>
Date: Tue, 6 Jun 2023 15:44:41 +0200
Subject: [PATCH 5/5] :recycle: #43 - Use Formik FieldArray.

---
 .../multiple/multiple.container.tsx           | 113 ++++++++----------
 1 file changed, 51 insertions(+), 62 deletions(-)

diff --git a/src/containers/multiple/multiple.container.tsx b/src/containers/multiple/multiple.container.tsx
index 1b722d6..ac81c75 100644
--- a/src/containers/multiple/multiple.container.tsx
+++ b/src/containers/multiple/multiple.container.tsx
@@ -1,10 +1,12 @@
 import {Component, Description, Label} from '@components';
 import {IRenderable, RenderComponent} from '@lib/renderer';
-import {IComponentProps, Values} from '@types';
+import {IComponentProps, Value, Values} from '@types';
+import {ArrayHelpers, FieldArray} from 'formik';
 import {ComponentSchema} from 'formiojs';
-import React, {useState} from 'react';
+import React from 'react';
 
 export interface IMultipleComponent extends ComponentSchema {
+  key: string;
   type: string;
 }
 
@@ -20,75 +22,62 @@ export interface IMultipleProps extends IComponentProps {
  * <RenderComponent/> to render individual instances.
  */
 export const Multiple: React.FC<IMultipleProps> = props => {
-  const {component, form, path, value = [], setValue} = props; // FIXME: Awaits future pr.
-  const [keys, setKeys] = useState<number[]>([0]);
-
-  /** Finds next key by increasing the max key with 1. */
-  const getKey = (): number => {
-    if (!keys.length) {
-      return 0;
-    }
-    const max = Math.max(...keys);
-    return max + 1;
-  };
-
-  /** Add item. */
-  const add = () => {
-    setKeys([...keys, getKey()]);
-  };
-
-  /** Remove item at index. */
-  const remove = (index: number) => {
-    const _keys = keys.filter((_, i) => i !== index);
-    const val = value.filter((_, i) => i !== index);
-    setKeys(_keys);
-    setValue(path, val);
-  };
+  const {component, form, path, value = []} = props; // FIXME: Awaits future pr.
 
   /** Renders individual components utilizing <RenderComponent/>. */
-  const renderComponents = () =>
-    keys.map((key, index) => {
-      // Clone and adjust component to fit nested needs.
-      const renderable: IRenderable = {
-        ...structuredClone(component),
-        key: `${path}.${index}`, // Trigger Formik array values.
-        multiple: false, // Handled by <Multiple/>
-        description: '', // One description rendered for all components.
-        label: '', // One label rendered for all components.
-      };
+  const renderComponent = (value: Value, index: number, remove: ArrayHelpers['remove']) => {
+    // Clone and adjust component to fit nested needs.
+    const renderable: IRenderable = {
+      ...structuredClone(component),
+      key: `${path}.${index}`, // Trigger Formik array values.
+      multiple: false, // Handled by <Multiple/>
+      description: '', // One description rendered for all components.
+      label: '', // One label rendered for all components.
+    };
 
-      return (
-        <tr key={key}>
-          <td>
-            <RenderComponent component={renderable} form={form} path={path} value={value[index]} />
-          </td>
-          <td>
-            <button onClick={() => remove(index)} aria-controls={renderable.key}>
-              Remove item
-            </button>
-          </td>
-        </tr>
-      );
-    });
+    return (
+      <tr key={index}>
+        <td>
+          <RenderComponent
+            component={renderable}
+            form={form}
+            path={`${path}.${index}`}
+            value={value}
+          />
+        </td>
+        <td>
+          <button type="button" aria-controls={renderable.key} onClick={() => remove(index)}>
+            Remove item
+          </button>
+        </td>
+      </tr>
+    );
+  };
 
   return (
     <Component {...props}>
       {props.component.label && (
         <Label label={props.component.label} componentId={props.component.key as string} />
       )}
-      <table>
-        <tbody>{renderComponents()}</tbody>
-        <tfoot>
-          <tr>
-            <td>
-              <button type="button" onClick={add}>
-                Add another
-              </button>
-            </td>
-          </tr>
-        </tfoot>
-      </table>
-      <table />
+      <FieldArray
+        name={component.key}
+        render={({push, remove}) => (
+          <table>
+            <tbody>
+              {value.map((value: Value, index: number) => renderComponent(value, index, remove))}
+            </tbody>
+            <tfoot>
+              <tr>
+                <td>
+                  <button type="button" onClick={() => push(component.defaultValue || null)}>
+                    Add another
+                  </button>
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        )}
+      />
       {props.component.description && <Description description={props.component.description} />}
     </Component>
   );