# Unable to re-render the form for custom changes; each formData update still displays the old data values

**URL:** <https://jsonforms.discourse.group/t/unable-to-re-render-the-form-for-custom-changes-each-formdata-update-still-displays-the-old-data-values/2293>\
**Category:** General\
**Created:** [August 20, 2024, 3:04am UTC](https://jsonforms.discourse.group/t/unable-to-re-render-the-form-for-custom-changes-each-formdata-update-still-displays-the-old-data-values/2293 "2024-08-20T03:04:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mallisk](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/mallisk/32/1091_2.png) [@mallisk](https://jsonforms.discourse.group/u/mallisk)\
**Post date:** [August 20, 2024, 3:04am UTC](https://jsonforms.discourse.group/t/unable-to-re-render-the-form-for-custom-changes-each-formdata-update-still-displays-the-old-data-values/2293/1 "2024-08-20T03:04:07Z")

</div>

“I have `FormData` which contains an array of objects. Each time the `objectId` changes, a different object is passed into `FormData`. However, the newly updated `FormData` is not reflected in the form.”

const schema = {  
“type”: “object”,  
“title”: “Visual Assessment Form”,  
“required”: ,  
“properties”: {  
“visual\_header”: {  
“type”: “object”,  
“title”: “--------VISUAL CENTER--------”,  
“properties”: {  
“visual\_presence”: {  
“enum”: [“Yes”, “No”],  
“type”: “string”,  
“title”: “Can you identify the visual center?”,  
“segLabel”: “Visual Center”,  
“toolMapping”: “brush”  
}  
}  
},  
“condition\_header”: {  
“type”: “object”,  
“title”: “--------CONDITION--------”,  
“properties”: {  
“condition\_IRF”: {  
“enum”: [“Yes”, “No”, “Ungradable”],  
“type”: “string”,  
“title”: “Is IRF present?”,  
“segLabel”: “IRF”,  
“toolMapping”: “brush”  
},  
“condition\_SRF”: {  
“enum”: [“Yes”, “No”, “Ungradable”],  
“type”: “string”,  
“title”: “Is SRF present?”,  
“segLabel”: “SRF”,  
“toolMapping”: “brush”  
}  
}  
},  
“remarks\_header”: {  
“type”: “object”,  
“title”: “”,  
“properties”: {  
“remarks”: {  
“type”: “string”,  
“title”: “Additional Remarks”  
}  
}  
},  
“assessability\_header”: {  
“title”: “”,  
“properties”: {  
“assessability”: {  
“enum”: [“Yes”, “No”],  
“type”: “string”,  
“title”: “Is the Study Assessable?”  
}  
}  
}  
},  
“description”: “”  
}

const uiSchema = {  
“visual\_header”: { “visual\_presence”: { “ui:widget”: “radio” } },  
“condition\_header”: {  
“condition\_IRF”: { “ui:widget”: “radio” },  
“condition\_SRF”: { “ui:widget”: “radio” }  
},  
“remarks\_header”: { “remarks”: { “ui:widget”: “textarea” } },  
“assessability\_header”: { “assessability”: { “ui:widget”: “radio” } }  
}

const formData= [  
{ “visual\_header”: { “visual\_presence”: “Yes” }, “condition\_header”: { “condition\_IRF”: null, “condition\_SRF”: null }, “remarks\_header”: { “remarks”: “ere” }, “assessability\_header”: { “assessability”: null }, “SectionNumber”: 0 },  
{ “visual\_header”: { “visual\_presence”: null }, “condition\_header”: { “condition\_IRF”: null, “condition\_SRF”: null }, “remarks\_header”: { “remarks”: “NEW DATA” }, “assessability\_header”: { “assessability”: null }, “SectionNumber”: 1 },  
{ “visual\_header”: { “visual\_presence”: null }, “condition\_header”: { “condition\_IRF”: “Yes”, “condition\_SRF”: null }, “remarks\_header”: { “remarks”: “NEW DATA” }, “assessability\_header”: { “assessability”: null }, “SectionNumber”: 3 },  
]  
const CurrentFormData = Formdata[objectId] // objectId is keep changing based on request

I would greatly appreciate it if someone could take a look and provide any insights or suggestions to resolve this issue. If you need any more details or code snippets to understand the problem better, please let me know!

---

<div class="post-metadata">

**Author:** ![mallisk](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/mallisk/32/1091_2.png) [@mallisk](https://jsonforms.discourse.group/u/mallisk)\
**Post date:** [August 20, 2024, 3:06am UTC](https://jsonforms.discourse.group/t/unable-to-re-render-the-form-for-custom-changes-each-formdata-update-still-displays-the-old-data-values/2293/2 "2024-08-20T03:06:18Z")

</div>

@ [sdirix](https://jsonforms.discourse.group/u/sdirix)

---

<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:** [August 20, 2024, 8:53am UTC](https://jsonforms.discourse.group/t/unable-to-re-render-the-form-for-custom-changes-each-formdata-update-still-displays-the-old-data-values/2293/3 "2024-08-20T08:53:04Z")

</div>

Whenever you hand in a different object than before as the `data` prop to JSON Forms, JSON Forms will rerender.

However it seems like that you have custom renderers in place as I’m not familiar with the UI Schema options you are using. You need to make sure that these custom renderers are reacting on `data` changes with an appropriate rerender. If one of them caches too aggressively, this could be a source of the error.

As an alternative you could also hand over a `key` set to `objectId` to JSON Forms. This will force JSON Forms to completely reconstruct with every `objectId` change and therefore any local caches will be cleared as the corresponding components will be gone.

Which alternative to choose depends on your requirements and use cases.

---

<div class="post-metadata">

**Author:** ![mallisk](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/mallisk/32/1091_2.png) [@mallisk](https://jsonforms.discourse.group/u/mallisk)\
**Post date:** [August 22, 2024, 4:44am UTC](https://jsonforms.discourse.group/t/unable-to-re-render-the-form-for-custom-changes-each-formdata-update-still-displays-the-old-data-values/2293/4 "2024-08-22T04:44:09Z")

</div>

Hi @sdirix ,Thank you for your previous response. I’ve tried using the `key` prop, and while the data is being passed correctly, it’s not binding with the form. When handling the `onChange` event, only the selected values are being captured, and the rest of the `formData` object is missing. As a result, we are losing the unselected data. Is there another way to handle this?

---

<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:** [August 22, 2024, 7:40am UTC](https://jsonforms.discourse.group/t/unable-to-re-render-the-form-for-custom-changes-each-formdata-update-still-displays-the-old-data-values/2293/5 "2024-08-22T07:40:39Z")

</div>

It’s difficult to debug this from afar. I don’t even know which framework, bindings and renderer sets you are using. Generally speaking, the issue described in the first post should not happen with JSON Forms. So the most likely cause is an issue in how JSON Forms is used or a bug in a custom renderer.

> [@mallisk](#):
>
> I’ve tried using the `key` prop, and while the data is being passed correctly, it’s not binding with the form. When handling the `onChange` event, only the selected values are being captured, and the rest of the `formData` object is missing. As a result, we are losing the unselected data. Is there another way to handle this?

All of this sounds very unusual. Without your code I’m not able to help you.