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

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions