**
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 (
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
