My initial Form gets generated. When I change my state the form UI breaks. Is it not possible to just replace treeState.customDataHolder?.jsonSchema?.referenceData with another schema and let the Form be dynamically changed? I try to reuse the same form component but just change the data under the hood? Is the approach maybe not the recommended one and I have to instantiate a new form every time instead and if so how?

I have an initial state containing most of the information I need:

  const [treeState, setTreeState] = useState<ExtendedNodeData>({
name: 'root',
children: [],
customDataHolder: {
  jsonSchema: {
    schemaName: 'currentlyChosenSchema',
    fullFolderPath: 'initial',
    referenceData: {
      title: 'Files',
      type: 'object',
      properties: {
        file: {
          type: 'string',
          format: 'data-url',
          title: 'Single file'
        },
        files: {
          type: 'array',
          title: 'Multiple files',
          items: {
            type: 'string',
            format: 'data-url'
          }
        },
        filesAccept: {
          type: 'string',
          format: 'data-url',
          title: 'Single File with Accept attribute'
        }
      }
    }
  }
}
})

And I render my form as follows:

  <Form
    className="readableBackground"
    schema={treeState.customDataHolder?.jsonSchema?.referenceData}
    validator={validator}
    onChange={onFormChange}
    onSubmit={onSubmit}
    onError={customLog('errors')}
  />

PS: The onChange onSubmit and onError functions do nothing it is just a console.log.

My initial Form gets generated. When I change my state the form UI breaks. Is it not possible to just replace treeState.customDataHolder?.jsonSchema?.referenceData with another schema and let the Form be dynamically changed? I try to reuse the same form component but just change the data under the hood? Is the approach maybe not the recommended one and I have to instantiate a new form every time instead and if so how?

I have an initial state containing most of the information I need:

  const [treeState, setTreeState] = useState<ExtendedNodeData>({
name: 'root',
children: [],
customDataHolder: {
  jsonSchema: {
    schemaName: 'currentlyChosenSchema',
    fullFolderPath: 'initial',
    referenceData: {
      title: 'Files',
      type: 'object',
      properties: {
        file: {
          type: 'string',
          format: 'data-url',
          title: 'Single file'
        },
        files: {
          type: 'array',
          title: 'Multiple files',
          items: {
            type: 'string',
            format: 'data-url'
          }
        },
        filesAccept: {
          type: 'string',
          format: 'data-url',
          title: 'Single File with Accept attribute'
        }
      }
    }
  }
}
})

And I render my form as follows:

  <Form
    className="readableBackground"
    schema={treeState.customDataHolder?.jsonSchema?.referenceData}
    validator={validator}
    onChange={onFormChange}
    onSubmit={onSubmit}
    onError={customLog('errors')}
  />

PS: The onChange onSubmit and onError functions do nothing it is just a console.log.

• reactjs
• state
• react-jsonschema-forms

1 Answer 1

So I had to do the following in my react electron app:

for updates on click:

const onNameClick = (opts: { defaultOnClick: () => void; nodeData: ExtendedNodeData }) => {
const {
  // internal data
  path,
  name,
  checked,
  isOpen,
  children,
  // custom data
  ...data
} = opts.nodeData

window['electronAPI'].settings().then((val: Dictionary) => {
  if (val.tree.customDataHolder) {
    val.tree.customDataHolder.jsonSchema.schemaName =
      data.customDataHolder?.jsonSchema.schemaName || ''
    val.tree.customDataHolder.jsonSchema.fullFolderPath =
      data.customDataHolder?.jsonSchema.fullFolderPath || ''
    val.tree.customDataHolder.jsonSchema.referenceData =
      data.customDataHolder?.jsonSchema.referenceData

    console.log(`CLICKED on ${name}:${data.customDataHolder?.jsonSchema.schemaName}`)
  }

  settings = val
  setTreeState(settings.tree as ExtendedNodeData)
})

opts.defaultOnClick()

}

and initial load:

  const onRefreshClick = () => {
window['electronAPI'].settings().then((val: Dictionary) => {
  const filePathElement = document.getElementById(textRootPath)
  if (filePathElement != null) {
    filePathElement.innerText = val.paths.root
    settings = val
  }

  setTreeState(settings.tree as ExtendedNodeData)
})

}