# How to impelement custom object renderer

**URL:** <https://jsonforms.discourse.group/t/how-to-impelement-custom-object-renderer/1040>\
**Category:** General\
**Created:** [September 24, 2022, 11:57am UTC](https://jsonforms.discourse.group/t/how-to-impelement-custom-object-renderer/1040 "2022-09-24T11:57:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![pankaj-z](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@pankaj-z](https://jsonforms.discourse.group/u/pankaj-z)\
**Post date:** [September 24, 2022, 11:57am UTC](https://jsonforms.discourse.group/t/how-to-impelement-custom-object-renderer/1040/1 "2022-09-24T11:57:18Z")

</div>

Hi, I am trying to create a custom object renderer. My use case is to wipe out all the data that is been entered in the object properties if the object itself is not visible on the UI.

```auto
import {
  ControlWithDetailProps,
  isObjectControl,
  RankedTester,
  rankWith,
} from '@jsonforms/core';
import { withJsonFormsControlProps } from '@jsonforms/react';

export const CustomObjectRenderer = ({
  renderers,
  cells,
  uischemas,
  schema,
  label,
  path,
  visible,
  enabled,
  uischema,
  rootSchema,
  data,
  handleChange,
}: ControlWithDetailProps) => {
  console.log('path is', path);
  console.log('data is', data);
  console.log('handleChange', handleChange);

  return <>this form is rendered</>;
};

export const customObjectControlTester: RankedTester = rankWith(
  3,
  isObjectControl
);

export default withJsonFormsControlProps(CustomObjectRenderer);

```

But the problem is properties like handleChange, path, data,visible are not passed to CustomObjectRenderer.

I am using jsonforms react version 2.5.1 with material renderers.

---

<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:** [September 29, 2022, 10:54am UTC](https://jsonforms.discourse.group/t/how-to-impelement-custom-object-renderer/1040/2 "2022-09-29T10:54:28Z")

</div>

Hi @pankaj-z,

On a first glance the code looks like it should be working. Please make sure that you are registering the wrapped default export and not the also exported `CustomObjectRenderer`. Can you post the registering code where you hand over the renderers to JSON Forms?

Note that you should be using `withJsonFormsDetailProps` instead of `withJsonFormsControlProps` if you want to use the existing helpers for object rendering.

In general I would recommend switching to JSON Forms 3.0 if possible for you.

---

<div class="post-metadata">

**Author:** ![pankaj-z](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@pankaj-z](https://jsonforms.discourse.group/u/pankaj-z)\
**Post date:** [September 30, 2022, 2:47pm UTC](https://jsonforms.discourse.group/t/how-to-impelement-custom-object-renderer/1040/3 "2022-09-30T14:47:41Z")

</div>

This is how I register it.

```auto
export const renderers = [
  ...materialRenderers,
  { tester: arrayLayoutTester, renderer: ArrayLayout },

  { tester: radioControlTester, renderer: CustomRadioControl },
  {
    tester: customCheckboxControlTester,
    renderer: CustomCheckboxControl
  },
  { tester: customInputControlTester, renderer: CustomInputControl },
  { tester: customZipControlTester, renderer: CustomZipControl },
  { tester: customSsnControlTester, renderer: CustomSsnControl },

  { tester: customSelectControlTester, renderer: CustomSelect },
  {
    tester: customPropertyEnablerTester,
    renderer: CustomPropertyEnablerControl
  },
  {
    tester: customNumberControlTester,
    renderer: CustomNumberControl
  },
  {
    tester: customDatePickerControlTester,
    renderer: CustomDatePickerControl
  },
  **{**
 **tester: customObjectControlTester,**
 **renderer: CustomObjectRenderer**
 **}**
]

```

And this is how I am passing it to JsonForms

```auto
<JsonForms
          schema={schema}
          uischema={uiSchema}
          data={data}
          renderers={formRenderers || []}
          cells={materialCells}
          onChange={({ errors, data }) => {
            handleFormDataChange(data, errors)
          }}
          validationMode={validationMode}
        />

```

---

<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:** [October 4, 2022, 9:08am UTC](https://jsonforms.discourse.group/t/how-to-impelement-custom-object-renderer/1040/4 "2022-10-04T09:08:15Z")

</div>

Hi @pankaj-z, can you also show how you import the `CustomObjectRenderer`?