React JsonForms Retaining Previous Page Values

General
1

I am working on a React application using the json-form library. In my application, I manage formData, uiSchema, and schema with the useState hook and pass them as props to the JsonForms component provided by the library. Below is an example of my implementation:

<JsonForms
  data={formData}
  schema={schema}
  uischema={uiSchema}
  renderers={renderers}
  cells={materialCells}
  onChange={({ data, errors }) => changeHandler(data, errors)}
  validationMode={validationMode}
  additionalErrors={additionalErrors}
  ajv={ajv}
/>

I have implemented routing in the application, and when navigating to a new page using a custom button, I update uiSchema, schema, and formData using the set methods of the useState hook.

Problem: When I set formData to an empty object ({}), it generally works fine. However, if the upcoming page has the same component in the same position as on the current page, the set method works, and data is set to an empty object, but the components retain the values from the previous page.

For reference, here are the uiSchema configurations of both pages:

export const AgencyMasterUISchema = {
  type: "HorizontalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/aggrementEndDate",
      options: { widget: "DateInputField" },
      config: {
        layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 },
        main: { label: "Agreement End Date", type: "text" },
      },
    },
 //Custom Input Widget at index no. 1 in current page.
    {
      type: "Control",
      scope: "#/properties/userName",
      options: { widget: "InputField" },
      config: {
        layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 },
        main: {
          label: "Domain login ID",
          type: "text",
          errorMessage: "Domain login ID is empty or invalid",
        },
      },
    },
  ],
};

export const RuleMasterUISchema = {
  type: "HorizontalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/newSelect",
      options: { widget: "SelectInputField" },
      config: {
        layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 },
        main: {
          label: "Role",
          options: [],
          errorMessage: "Role is not selected",
        },
      },
    },
 // Custom Input Widget at index no. 1 in upcoming page
    {
      type: "Control",
      scope: "#/properties/detailuser",
      options: { widget: "InputField" },
      config: {
        layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 },
        main: {
          label: "Domain login ID",
          type: "text",
          errorMessage: "Domain login ID is empty or invalid",
        },
      },
    },
    {
      type: "Control",
      scope: "#/properties/docAggrementCopy",
      options: { widget: "UploadFile" },
      config: {
        layout: { xs: 4.8, sm: 4.8, md: 4.8, lg: 4.8 },
        main: { required: false, onClick: "uploadFile" },
        style: { backgroundColor: "none" },
      },
    },
  ],
};

Note: The above schemas are for reference and not the actual ones.

Versions:

  • @jsonforms/core: ^3.0.0
  • @jsonforms/examples: ^3.0.0
  • @jsonforms/material-renderers: ^3.0.0
  • @jsonforms/react: ^3.0.0
  • react-dom: ^18.2.0
  • react-router: ^6.0.0
  • react-router-dom: ^6.11.2

Could anyone provide assistance with this issue? If more information is needed, please let me know. Thank you!

2

Hi @SatendraRaghav,

Are off-the-shelf components not updating correctly or are these custom renderers?

In any case, what you can do to workaround the issue is to add a key attribute to JSON Forms which contains the current route of your app. This way the form will fully rerender whenever there is a routing change, no matter how the schemas, ui schemas etc. are structured.

1 Like
3

Thank you, @sdirix . The issue has been resolved using the provided solution.