# Issue in my Code

**URL:** <https://jsonforms.discourse.group/t/issue-in-my-code/1896>\
**Category:** General\
**Created:** [January 5, 2024, 5:49am UTC](https://jsonforms.discourse.group/t/issue-in-my-code/1896 "2024-01-05T05:49:55Z")\
**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:** [January 5, 2024, 5:49am UTC](https://jsonforms.discourse.group/t/issue-in-my-code/1896/1 "2024-01-05T05:49:55Z")

</div>

\*\*

> Custom TextField Renderer

\*\*

import {  
ControlProps,  
isStringControl,  
RankedTester,  
rankWith  
} from ‘@jsonforms/core’;  
import { withJsonFormsControlProps } from ‘@jsonforms/react’;  
import { TextField } from ‘@mui/material’;

const MyTextFieldControl = (props: ControlProps) =\> (  
\<TextField  
label={props.label}  
value={props.data}  
onChange={(event) =\> props.handleChange(props.path, event.target.value)}  
error={!!props.errors}  
helperText={props.errors || props.description}  
disabled={!props.enabled}  
/\>  
);

const myTextFieldControlTester: RankedTester = rankWith(  
2, // higher than the one of JSON Forms Material which uses ‘1’  
isStringControl  
);

export const myTextFieldControlEntry = {  
renderer: withJsonFormsControlProps(MyTextFieldControl),  
tester: myTextFieldControlTester  
};

\*\*

> JsonForms main Component

\*\*

// App.js  
import React, { Fragment, useState, useMemo } from ‘react’;  
import { JsonForms } from ‘@jsonforms/react’;  
import Grid from ‘@mui/material/Grid’;  
import Button from ‘@mui/material/Button’;  
import Typography from ‘@mui/material/Typography’;  
import logo from ‘./logo.svg’;  
import ‘./App.css’;  
import schema from ‘./schema.json’;  
import uischema from ‘./uischema.json’;  
import { makeStyles } from ‘@mui/styles’;  
import { myTextFieldControlEntry } from ‘./CustomRenderer/textField’;

const useStyles = makeStyles({  
container: {  
padding: ‘1em’,  
width: ‘100%’,  
},  
title: {  
textAlign: ‘center’,  
padding: ‘0.25em’,  
},  
dataContent: {  
display: ‘flex’,  
justifyContent: ‘center’,  
borderRadius: ‘0.25em’,  
backgroundColor: ‘#cecece’,  
marginBottom: ‘1rem’,  
},  
resetButton: {  
margin: ‘auto !important’,  
display: ‘block !important’,  
},  
demoform: {  
margin: ‘auto’,  
padding: ‘1rem’,  
},  
});

const initialData = {  
name: ‘’,  
description: ‘’,  
done: false,  
recurrence: ‘’,  
rating: 4,  
};

const renderers = [myTextFieldControlEntry];

const App = () =\> {  
const classes = useStyles();  
const [data, setData] = useState(initialData);  
const stringifiedData = useMemo(() =\> JSON.stringify(data, null, 2), [data]);

const clearData = () =\> {  
setData({});  
};  
return (

  
  
 ![logo]()  

# Welcome to JSON Forms with React
  

More Forms. Less Code.

  
  

```
  <Grid
    container
    justifyContent={'center'}
    spacing={1}
    className={classes.container}
  >
    <Grid item sm={6}>
      <Typography variant={'h4'} className={classes.title}>
        Bound data
      </Typography>
      <div className={classes.dataContent}>
        <pre id='boundData'>{stringifiedData}</pre>
      </div>
      <Button
        className={classes.resetButton}
        onClick={clearData}
        color='primary'
        variant='contained'
      >
        Clear data
      </Button>
    </Grid>
    <Grid item sm={6}>
      <Typography variant={'h4'} className={classes.title}>
        Rendered form
      </Typography>
      <div className={classes.demoform}>
        <JsonForms
          schema={schema}
          uischema={uischema}
          data={data}
          renderers={renderers}
          onChange={({ errors, data }) => setData(data)}
        />
      </div>
    </Grid>
  </Grid>
</Fragment>

```

);  
};

export default App;

I dont know why it says No Applicable Renderer Found

 ![Screenshot 2024-01-05 111920](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/cada01e5928efd5cca71610cad6662f03143154f.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:** [January 5, 2024, 7:54am UTC](https://jsonforms.discourse.group/t/issue-in-my-code/1896/2 "2024-01-05T07:54:08Z")

</div>

> [@AnthonyAkash](#):
>
> const renderers = [myTextFieldControlEntry];

Hi @AnthonyAkash,

If you only customize the text renderer then you should still also use all of the existing renderers [like we do in the React seed](https://github.com/eclipsesource/jsonforms-react-seed/blob/3ed669c5e6434919b090c7c9981f3c9a643c125c/src/App.tsx#L52-L56). Otherwise you will not have any layout renderers and your `MyTextFieldControl` tester only handles string controls, therefore there is no applicable renderer found.