# How to pass error to custom renderer (React)?

**URL:** <https://jsonforms.discourse.group/t/how-to-pass-error-to-custom-renderer-react/1413>\
**Category:** General\
**Created:** [March 29, 2023, 10:58am UTC](https://jsonforms.discourse.group/t/how-to-pass-error-to-custom-renderer-react/1413 "2023-03-29T10:58:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![epustovaya](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/epustovaya/32/616_2.png) [@epustovaya](https://jsonforms.discourse.group/u/epustovaya)\
**Post date:** [March 29, 2023, 10:58am UTC](https://jsonforms.discourse.group/t/how-to-pass-error-to-custom-renderer-react/1413/1 "2023-03-29T10:58:32Z")

</div>

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:

 ![Screenshot 2023-03-29 at 12.35.16](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/a14a7c4e093e90158cc26af3b3321387234c1818.jpeg)

renderer:

 ![Screenshot 2023-03-29 at 12.32.52](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/45550fed74d9a9328ec21281b3fc485436191d19.png)

---

<div class="post-metadata">

**Author:** ![epustovaya](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/epustovaya/32/616_2.png) [@epustovaya](https://jsonforms.discourse.group/u/epustovaya)\
**Post date:** [March 29, 2023, 11:02am UTC](https://jsonforms.discourse.group/t/how-to-pass-error-to-custom-renderer-react/1413/2 "2023-03-29T11:02:42Z")

</div>

There is a similar [question](https://jsonforms.discourse.group/t/error-doesnt-show-up-in-custom-renderer/890/3) , but the [answer](https://jsonforms.discourse.group/t/error-doesnt-show-up-in-custom-renderer/890/3) 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 ?

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [March 29, 2023, 12:28pm UTC](https://jsonforms.discourse.group/t/how-to-pass-error-to-custom-renderer-react/1413/3 "2023-03-29T12:28:05Z")

</div>

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,

---

<div class="post-metadata">

**Author:** ![epustovaya](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/epustovaya/32/616_2.png) [@epustovaya](https://jsonforms.discourse.group/u/epustovaya)\
**Post date:** [March 29, 2023, 1:31pm UTC](https://jsonforms.discourse.group/t/how-to-pass-error-to-custom-renderer-react/1413/4 "2023-03-29T13:31:24Z")

</div>

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

```auto
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:

```auto
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:

 ![Screenshot 2023-03-29 at 15.30.27](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/9efe3dc50624ebb2cd4672830aadd7343939e015.jpeg)

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [March 29, 2023, 1:50pm UTC](https://jsonforms.discourse.group/t/how-to-pass-error-to-custom-renderer-react/1413/5 "2023-03-29T13:50:42Z")

</div>

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](https://jsonforms.io/docs/i18n#defaultmessage):

> 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.

---

<div class="post-metadata">

**Author:** ![epustovaya](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/epustovaya/32/616_2.png) [@epustovaya](https://jsonforms.discourse.group/u/epustovaya)\
**Post date:** [March 29, 2023, 2:42pm UTC](https://jsonforms.discourse.group/t/how-to-pass-error-to-custom-renderer-react/1413/6 "2023-03-29T14:42:21Z")

</div>

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.