No applicable renderer found - react without material

General
1

Hi!
I’m just getting started with json-forms and trying to use it without material. I’ve done everithing according to the guide, but I’ve catched an error: “No applicable renderer found”.
I use react 18. I made everithind as simple as it possible, but there is still error.

code.
form-file:

const renderers = [
  { tester: fieldInputTester, renderer: FieldInputControl }
];

export const FormDemo: FC<FormDemoProps> = (props) => (
  <div className={classes.root}>
    <JsonForms uischema={uischema} schema={schema} data={initialData} renderers={renderers} />
  </div>
);

FieldInput:

import { withJsonFormsControlProps } from '@jsonforms/react';
import FieldInput from 'src/shared/ui/Form/FieldInput';

type FieldInputControlProps = {
  data: any;
  handleChange: (path: string, value: any) => void;
  path: string;
};

const FieldInputControl = ({ data, handleChange, path }: FieldInputControlProps) => {
  console.log('FieldInputControl data', data);

  return (
    <FieldInput
      value={data}
      onChange={(value) => handleChange(path, value)}
    />
  );
};

export default withJsonFormsControlProps(FieldInputControl);

tester:

import { rankWith, scopeEndsWith } from '@jsonforms/core';

export default rankWith(
  3,
  scopeEndsWith('input')
);

schema:

{
  "type": "object",
  "properties": {
    "input": {
      "type": "string"
    }
  }
}

uischema:

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/input"
    }
  ]
}
2

Hi @epustovaya,

In general the code looks good! What you are missing is a renderer which is able to handle the VerticalLayout.

JSON Forms will encounter the VerticalLayout first and will try to find a renderer for it. However you only hand over the {fieldInputTester, FieldInputControl} which will return not applicable (i.e. -1). Therefore there is no renderer for VerticalLayout found and JSON Forms will output the error message instead.

See here for an example for a VerticalLayout renderer.

3

didn’t know, that layouts need renderers too. Ok, I’ll try, thank you :slight_smile:

1 Like