Injecting independent JsonForms instance in a custom renderer

General
1

Hi,
I would like to know if it is officially supported and safe to use a <JsonForms /> component as a custom renderer inside another <JsonForms /> instance in React.

My use case is to render a nested form (with its own schema, uischema, and data) for a specific object property in the main form, and handle its validation and data updates separately.
The injected (nested) form is completely independent from the main form - it fetches its own schema and uischema asynchronously, manages its own data, and does not share or merge schemas with the parent.
Ideally, the main form should only care whether the injected form is valid, and not be responsible for merging or managing its schema or data.

Is this approach recommended? Are there any caveats regarding context, validation, or performance?

import { JsonForms } from '@jsonforms/react';

const fetchNestedSchemas = async () => {
  // Simulate async fetch
  return {
    schema: {
      type: 'object',
      properties: {
        nestedField: { type: 'string' }
      }
    },
    uischema: {
      type: 'Control',
      scope: '#/properties/nestedField'
    }
  };
};

// In "injected" form

const NestedFormRenderer = () => {
  const [schemas, setSchemas] = useState({ schema: null, uischema: null });
  const [data, setData] = useState({ nestedField: '' });

  useEffect(() => {
    fetchNestedSchemas().then(setSchemas);
  }, []);

  if (!schemas.schema || !schemas.uischema) {
    return <div>Loading nested form...</div>;
  }

  return (
    <JsonForms
      schema={schemas.schema}
      uischema={schemas.uischema}
      data={data}
      onChange={({ data }) => setData(data)}
    />
  );
};

// In renderers array:
const renderers = [
  // ...other renderers,
  { tester: myTester, renderer: NestedFormRenderer }
];

// In the main form:
<JsonForms
  schema={mainSchema}
  uischema={mainUiSchema}
  data={mainData}
  renderers={renderers}
/>
2

We do not explicitly support or test this use case. However generally speaking I do not think that there should be any breakage or issues. The JsonForms component will take care of providing new “inner” React contexts, so the nested forms should not affect each other.

In one of our projects we had a similar use case, with arbitrarily deep nested forms. However these were mostly independent from each other. So what we did is to render simple “divs” wherever a nested form shall be placed and then used React portals to place the “nested” form in the div. This worked out nicely as we then had one centralized “management” component taking care of schema/error/data management then simply kicking of the rendering of each “nested” form.

1 Like
3

Thank you very much! Great use case, I love the idea of using portals. Nice one :slight_smile: