# Custom Renderer for JsonForms

**URL:** <https://jsonforms.discourse.group/t/custom-renderer-for-jsonforms/1815>\
**Category:** General\
**Created:** [November 12, 2023, 1:36pm UTC](https://jsonforms.discourse.group/t/custom-renderer-for-jsonforms/1815 "2023-11-12T13:36:17Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![AnthonyAkash](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/anthonyakash/32/872_2.png) [@AnthonyAkash](https://jsonforms.discourse.group/u/AnthonyAkash)\
**Post date:** [November 12, 2023, 1:36pm UTC](https://jsonforms.discourse.group/t/custom-renderer-for-jsonforms/1815/1 "2023-11-12T13:36:17Z")

</div>

Custom Overiding Material Text Component

import React from ‘react’;  
import { MaterialTextControl } from ‘@jsonforms/material-renderers’;

const CustomMaterialTextControl = (props) =\> {  
// Override styles  
const customStyle = {  
border: ‘1px solid #ccc’,  
borderRadius: ‘4px’,  
padding: ‘8px’,

};

return \<MaterialTextControl {…props} style={customStyle} /\>;  
};

export default CustomMaterialTextControl;

Json Forms Overiding

import CustomMaterialTextControl from ‘components/CustomTextfield’;

const JsonForms = () = {  
return(  
\<\>

\<JsonForms  
schema={pg\_schema}  
uischema={pg\_uischema}  
data={data}  
renderers={[…materialRenderers,{tester:CustomMaterialTextControl,renderer:CustomMaterialTextControl}]}  
cells={materialCells}  
onChange={({ data }) =\> handleFieldChange(data)}  
values={formikData?.scenario\_data}  
/\>  
\</\>  
)  
}

I wanted to overide the defaut renderer and set a new renderer to the json form but its not working

---

<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:** [November 12, 2023, 7:15pm UTC](https://jsonforms.discourse.group/t/custom-renderer-for-jsonforms/1815/2 "2023-11-12T19:15:45Z")

</div>

Hi @AnthonyAkash,

You need to implement an actual tester, you can’t hand over the control as the tester. Also for performance reasons you should make your `renderers` array stable, otherwise JSON Forms will completely rerender the form for every renderer pass, as the handed over `renderers` array is a new instance.

See here for an [example tester](https://github.com/eclipsesource/jsonforms/blob/f905c828a5e2ab1f32f831b245d1d381895c6628/packages/material-renderers/src/controls/MaterialTextControl.tsx#L40-L43). You will need to hand over one with a higher ranking.