# How to re-inizalize a complex json form

**URL:** <https://jsonforms.discourse.group/t/how-to-re-inizalize-a-complex-json-form/1338>\
**Category:** General\
**Created:** [February 19, 2023, 10:29pm UTC](https://jsonforms.discourse.group/t/how-to-re-inizalize-a-complex-json-form/1338 "2023-02-19T22:29:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rsoika](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/rsoika/32/340_2.png) [@rsoika](https://jsonforms.discourse.group/u/rsoika)\
**Post date:** [February 19, 2023, 10:29pm UTC](https://jsonforms.discourse.group/t/how-to-re-inizalize-a-complex-json-form/1338/1 "2023-02-19T22:29:12Z")

</div>

I have a strange behaviour in a situation with a very dynamic JSONForm used in a GLSP diagram

The user can select different diagram elements in GLSP Diagram. Each element shows different form content. On the selection event within my diagram panel I refresh the form panel by calling the render method and updating the schema and data:

```javascript
 this.panelContainer.render(<JsonForms
    data={bpmnPropertiesData}
    schema={bpmnPropertiesSchema}
    uischema={bpmnPropertiesUISchema}
    cells={vanillaCells}
    renderers={bpmnRenderers}
    onChange={({ errors, data }) => this.setState({ data })}
   />);

```

This works all fine.

![Peek 2023-02-19 23-23](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/a74bd1b66ec5feaffb79545a483f0cf1452270d7.gif)

But the problem is, that depending on the selected element, the form schema can change completely. This causes a Warning on the JavaScript console, because some of the data fields have now changed:

```log
....
2023-02-19T22:23:16.620Z root WARN No applicable cell found. {
  type: 'Control',
  scope: '#/properties/conditions',
  label: 'Conditions',
  options: { detail: { type: 'VerticalLayout', elements: [Array] } }
} {
  type: 'object',
  properties: {
    name: { type: 'string' },
    documentation: { type: 'string', description: 'Task description.' }
  }
......

```

The user must now ‘re-initalize’ the form by clicking on the first Tab (Category) in my multi-category form.

I figured out, that when I simulate a click event on the first category (li-Tag), after the selection has changed, the warning can be avoided.

My additional code to simulate the click looks like this:

```javascript
   const subCategories = this.bodyDiv.querySelector('ul.category-subcategories');
   if (subCategories) {
     const firstCategory = subCategories.querySelector('li');
     if (firstCategory) {
        // dispatch click event...
        const event = new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
        });
    firstCategory.dispatchEvent(event);
   }
 }

```

But also this does not highlight the first section, but at least the warning is gone and the first category is visible (but not high-lighted).

My question is: In case, I need to re-render the JSONForm content by calling

```
this.panelContainer.render(....)

```

is there a way to ‘re-initalize’ the form?

Sorry, the problem is hard to explain 😉

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [February 20, 2023, 7:57am UTC](https://jsonforms.discourse.group/t/how-to-re-inizalize-a-complex-json-form/1338/2 "2023-02-20T07:57:13Z")

</div>

Hi @rsoika!

> [@rsoika](#):
>
> But the problem is, that depending on the selected element, the form schema can change completely. This causes a Warning on the JavaScript console, because some of the data fields have now changed:

There seems to be a renderer with local state involved which does not properly reset its state when necessary. I had a quick look, it seems that our CategorizationRenderer does not properly check for the case where the UI Schema changes but [returns an older categorization](https://github.com/eclipsesource/jsonforms/blob/386174994eabc41758450b8d551e1c859498a468/packages/vanilla-renderers/src/complex/categorization/CategorizationRenderer.tsx#L93-L97). I created [a issue](https://github.com/eclipsesource/jsonforms/issues/2097) in the repo.

> [@rsoika](#):
>
> I figured out, that when I simulate a click event on the first category (li-Tag), after the selection has changed, the warning can be avoided.

You can use [React’s key mechanism](https://reactjs.org/docs/lists-and-keys.html#keys) to force a new component being created, e.g.

```auto
 this.panelContainer.render(<JsonForms
    data={bpmnPropertiesData}
    schema={bpmnPropertiesSchema}
    uischema={bpmnPropertiesUISchema}
    cells={vanillaCells}
    renderers={bpmnRenderers}
    onChange={({ errors, data }) => this.setState({ data })}
    key={someId}
   />);

```

You basically always hand over a new `key` whenever your selected element changes. By this a completely new form will be rendered each time, thereby fixing any issues were local state is not properly updated to the environment.

---

<div class="post-metadata">

**Author:** ![rsoika](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/rsoika/32/340_2.png) [@rsoika](https://jsonforms.discourse.group/u/rsoika)\
**Post date:** [February 20, 2023, 3:59pm UTC](https://jsonforms.discourse.group/t/how-to-re-inizalize-a-complex-json-form/1338/3 "2023-02-20T15:59:01Z")

</div>

Thanks! Setting the id did the trick.  
Sometimes things are so easy to solve - if you just know how 😉