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.
Share Improve this question asked Jan 18 at 13:24 rufreakderufreakde 6426 silver badges21 bronze badges1 Answer
Reset to default 0So 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)
})
}