How to pass error to custom renderer (React)?

[epustovaya (Ekaterina)]

Hi! )
I cannot understand how to work with error on renderer layer. I can see errors when form onChange triggers (the array with errors of all form), but I have no error in any renderer. What should I do, to get them?
my form:

renderer:

[epustovaya (Ekaterina)]

There is a similar question , but the answer isn’t clear for me.

It says:

just determine the errors for postalCode.value and show them in your postalCode renderer.

But how can I determine the errors ?

[sdirix (Stefan Dirix)]

Hi @epustovaya,

Wrapping your renderer with withJsonFormsControlProps should be sufficient for the error determination. Can you post the full code of the TextFieldControl and where and how it is registered? Please also show the code of FormTemplate.

The instancePath is empty in the errors because required errors are reported against the object which contains the properties, in this case it seems to be the root object, therefore an empty path,

[epustovaya (Ekaterina)]

Yes, I wrapped my control with withJsonFormsControlProps. There is the code:

import { rankWith, schemaTypeIs, uiTypeIs } from '@jsonforms/core';
import { withJsonFormsControlProps } from '@jsonforms/react';
import type { FormEvent } from 'react';
import FieldInput from 'src/shared/ui/Form/FieldInput';
import type { FieldInputBaseProps } from 'src/shared/ui/Form/FieldInput/FieldInput.types';
import type { CustomControlProps } from 'src/shared/ui/FormTemplate/types';

const TextFieldControl = (props: CustomControlProps) => {
  const { data, handleChange, path, schema, uischema, label, description } = props;
  const { ui, isClearable, ...textFieldProps } = uischema?.options || {};
  const helperMessage = schema?.additionalItems?.title;

  const onChange = (event: FormEvent<HTMLInputElement>) => {
    handleChange(path, event.currentTarget.value);
  };
  const handleClear = () => {
    handleChange(path, '');
  };

  return (
    <FieldInput
      id={path}
      maxLength={schema.maxLength}
      label={label || schema?.title}
      placeholder={description || schema?.description}
      value={data}
      onChange={onChange}
      clearValue={isClearable ? handleClear : undefined}
      helperMessage={helperMessage}
      {...textFieldProps as FieldInputBaseProps}
    />
  );
};

export const TextFieldRenderer = withJsonFormsControlProps(TextFieldControl);

export const TextFieldTester = rankWith(
  3,
  uiTypeIs('TextField')
);

FormTemplate:

import { JsonForms } from '@jsonforms/react';
import { vanillaCells } from '@jsonforms/vanilla-renderers';
import { get } from 'lodash';
import { useRouter } from 'next/router';
import type { FC } from 'react';
import React, { useMemo } from 'react';
import resources from 'src/shared/lib/i18n/locales';

import { renderers } from './renderers';
import type { FormTemplateProps } from './types';

export const FormTemplate: FC<FormTemplateProps> = ({
  uischema,
  schema,
  data,
  customRenderers = [],
  onChange,
  additionalErrors,
  validationMode = 'ValidateAndShow'
}: FormTemplateProps) => {

  const router = useRouter();
  const locale = router?.locale || 'en';

  const createTranslator = (currentLocale: string, defaultValue: string = '') => (key: string) => get(resources, `${currentLocale}.translation.${key}`, defaultValue);

  const translator = useMemo(() => createTranslator(locale), [locale]);

  const i18n = { locale, translate: translator };

  return (
    <JsonForms
      i18n={i18n}
      uischema={uischema}
      schema={schema}
      data={data}
      renderers={[...renderers, ...customRenderers]}
      cells={vanillaCells}
      onChange={onChange}
      additionalErrors={additionalErrors}
      validationMode={validationMode}
    />
  );
};

registering textField:

[sdirix (Stefan Dirix)]

On a first glance this looks good. Can you also show the schema, uischema and data of the problematic case?

Unrelated to the problem at hand: The renderers array handed to JSON Forms should be stable so that JSON Forms doesn’t need to run the tester determination with every render pass. Note that customRenderers = [] will also be a new empty array with every render pass.

Edit: I think I see where the error is. Please note the following warning in our i18n documentation:

If the defaultMessage is undefined , you should also return undefined if there is no translation for the given key. Returning an empty string (or something similar) instead may result in undesired behavior. JSON Forms will use undefined when the message could be skipped or another more generic key could be tried.

You are returning the empty string in your translator. Therefore the errors message will be translated to the empty string and doesn’t show up in your renderer. This also explains why label is the empty string in your first screenshots.

[epustovaya (Ekaterina)]

Thank yo so much! I would never have figured this out on my own.

And thank for that note (I’ll fix it):

The renderers array handed to JSON Forms should be stable so that JSON Forms doesn’t need to run the tester determination with every render pass. Note that customRenderers = [] will also be a new empty array with every render pass.