# Error doesn't show up in custom renderer

**URL:** <https://jsonforms.discourse.group/t/error-doesnt-show-up-in-custom-renderer/890>\
**Category:** General\
**Created:** [July 13, 2022, 4:32pm UTC](https://jsonforms.discourse.group/t/error-doesnt-show-up-in-custom-renderer/890 "2022-07-13T16:32:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Icenwharth](https://avatars.discourse-cdn.com/v4/letter/i/90db22/32.png) [@Icenwharth](https://jsonforms.discourse.group/u/Icenwharth)\
**Post date:** [July 13, 2022, 4:32pm UTC](https://jsonforms.discourse.group/t/error-doesnt-show-up-in-custom-renderer/890/1 "2022-07-13T16:32:37Z")

</div>

I have crated a custom renderer and have a schema that defines an object. Within that object there is a string property for which I added format to validate it. Now i can see the errors in the common JsonFroms component on the onChange functions but can’t see them in my custom renderer. The renderer is used based on a property isTextField that is defined in the schema.  
Schema:

 ![Screenshot 2022-07-13 at 18.44.37](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/642606d92cc18b9d2bde626c878165ca78c51d11.png)

JsonForms “wrapper” where the new format is created

 ![Screenshot 2022-07-13 at 18.45.19](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/185263d507d4acb5d50c473652d485ed171b1ef5.png)

Custom renderer

 ![Screenshot 2022-07-13 at 18.46.24](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/582ddd86f5735d9c78332f53fbf5d8657002a615.png)

---

<div class="post-metadata">

**Author:** ![Icenwharth](https://avatars.discourse-cdn.com/v4/letter/i/90db22/32.png) [@Icenwharth](https://jsonforms.discourse.group/u/Icenwharth)\
**Post date:** [July 13, 2022, 5:01pm UTC](https://jsonforms.discourse.group/t/error-doesnt-show-up-in-custom-renderer/890/2 "2022-07-13T17:01:28Z")

</div>

For anyone wondering.  
I ended up using the context provided by `useJsonForms()`.  
You can get the errors from there and then filter based on the instancePath.  
Although this approach may not be optimal because if I wanted to do other validations on my params I would need to filter the errors for each case.

---

<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:** [July 14, 2022, 11:09am UTC](https://jsonforms.discourse.group/t/error-doesnt-show-up-in-custom-renderer/890/3 "2022-07-14T11:09:49Z")

</div>

Hi @Icenwharth,

The `onChange` from `JsonForms` has nothing to do with the `onChange` of `TextInput`. They just share the same name:

- The `onChange` of `JsonForms` is emitted, whenever there is a change within `JsonForms` and returns the whole `data` object and all AJV `errors`.

- The `onChange` of Material UI for `TextInput` just gives you a change event for the input. At that point of time `JsonForms` does not yet know anything about the change and therefore couldn’t validate it.

The integration with `JsonForms` is accomplished via the `handleChange` method. The `handleChange` applies the data change at the right place (i.e. the `path`) of the form-wide data object and triggers a validation pass etc. This will then trigger a re-render where you get the new local `data` and the `errors` relevant to your data handed over.

Looking at the listed schema and code it seems that you modeled a `postalCode` object within the schema but you want to handle the whole object via a single textual input? It would help if you could post more of the code, especially how your tester and binding invocation look like.

If this is what you actually want to do (i.e. use a string renderer for the whole object and showing the errors of the whole object) then you need to manually filter the errors out of the JSON Forms form-wide error storage. I guess that is what you currently do with the `useJsonForms()` invocation. If you have that use case more often you might want to extract this into an own custom binding, e.g. `withErrorsForObjectProps` or something like that.  
Alternatively, as `title` and `placeholder` doesn’t seem to be rendered as inputs anyway and your’e probably just interested in the errors of the `postalCode.value` you could:

- just determine the errors for `postalCode.value` and show them in your `postalCode` renderer. Again this can be done via a custom binding (especially if you have the object → value pattern more often).
- or just use a control pointing to `#/properties/postalCode/properties/value` instead of `#/properties/postalCode`. Then the error determination of JSON Forms would work out of the box and your custom renderer just needs to look up the sibling values to render the `title` etc.

However in general this kind of `JSON Schema` and custom renderer usage is relatively uncommon. You usually don’t want to model meta data like `title`, `tooltipText` and `placeholder` as object properties in the `JSON Schema` and therefore include them in the `data` object. Are you developing some kind of form editor?

If not I would rather expect a JSON Schema like this:

```nohighlight
postalCode: {
  type: 'string',
  format: 'postalCode',
  title: 'your-title',
  placeholder: 'your-placeholder',
  tooltipText: 'your-tooltipText'
} 

```

---

<div class="post-metadata">

**Author:** ![Icenwharth](https://avatars.discourse-cdn.com/v4/letter/i/90db22/32.png) [@Icenwharth](https://jsonforms.discourse.group/u/Icenwharth)\
**Post date:** [July 14, 2022, 1:03pm UTC](https://jsonforms.discourse.group/t/error-doesnt-show-up-in-custom-renderer/890/4 "2022-07-14T13:03:58Z")

</div>

Wait so how would one receive data like `title` , `tooltipText` and `placeholder` in case one builds custom renderes.

Here is a screenshot of my tester.

 ![Screenshot 2022-07-14 at 15.03.25](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/c8afd9db6e1b0676b6dec482e326b9f0a7d1e2fb.png)

---

<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:** [July 14, 2022, 2:42pm UTC](https://jsonforms.discourse.group/t/error-doesnt-show-up-in-custom-renderer/890/5 "2022-07-14T14:42:56Z")

</div>

You get the current (sub)schema handed over via props, so a simple approach (e.g. without i18n support) would just to take them from there, e.g.

```auto
export const TextField: FC<ControlProps> = ({
  data,
  schema,
  uischema,
  path,
  errors,
  enabled,
  visible,
  id
}) => (
visible && <TextInput
  id={id}
  title={schema.title}
  tooltipText={schema.tooltipText}
  placeholder={schema.placeholder}
  errorMessage={errors}
  disable={!enabled}
  value={data}
  onChange={ ev => handleChange(path, ev.target.value)}
/>
);

```