Skip to content

FormBuilder with initialForm prop breaks React state updates #576

@DevTakao

Description

@DevTakao

Describe the bug
FormBuilder component causes React to not trigger state updates when initialForm prop is given a schema JSON. As warned in the documentation, I made sure the value is a stable reference by importing a constant JSON file.

To Reproduce

import { useState } from 'react';
import { FormBuilder, FormType } from '@formio/react';
import jsonData from '@/formSchemas/myForm.json';

const MyFormBuilder = () => {
  const [schema, setSchema] = useState<FormType>(jsonData as FormType);

  const onFormChange = (schema: FormType) => {
    setSchema(schema);
  };

  return (
    <div className="grid grid-cols-3">
      <div className="col-span-2">
        <FormBuilder initialForm={jsonData as FormType} onChange={onFormChange} />
      </div>
      <div className="schema-preview">
        <pre className="bg-slate-500 text-white p-2 max-h-[300px] overflow-auto">
          {JSON.stringify(schema, null, 2)}
        </pre>
      </div>
    </div>
  );
};

Expected behavior
The schema-preview section should update when a component is dragged into the builder and saved.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions