'Reactjs: Complex Nested forms and managing State
I am using ReactJS and MUI components to create a dynamic form based on the following JSON.
{
"form": {
"groups": [{
"group_id": "acfcbaa6-3bb9-45c0-ad0a-cb5237359bbb",
"group_name": "Group 1",
"elements": [{
"element_id": "dfc81836-3bb9-45c0-ad0a-cb5237359ba9",
"element_name": "report_type_id",
"element_type": "S",
"label": "Select a product",
"required": false,
"display": true,
"options": [{
"option_id": "0479f2a1-fd8f-487e-8d46-1f3a5572a6a1",
"option_name": "Product 1",
"elements": []
},
{
"option_id": "0479f5f1-fd8f-487e-8d46-1f3a5572a6a8",
"option_name": "Product 2",
"elements": []
},
{
"option_id": "0479sda1-fd8f-487e-8d46-1f3a5572a6a0",
"option_name": "Product 3",
"elements": []
},
{
"option_id": "0479f2a1-fd8f-487e-8d46-1f3a5572a6bb",
"option_name": "Product 4",
"elements": []
}
]
},
{
"element_id": "05bea614-6dc6-4c89-99db-fa6fa791728b",
"element_name": "product_price",
"element_type": "T",
"label": "Product Price",
"required": false,
"display": true,
"options": []
},
{
"element_id": "05bea614-6dc6-4c89-99db-fa6fa791728b",
"element_name": "product_category",
"element_type": "S",
"label": "Product Category",
"required": false,
"display": true,
"options": [{
"option_id": "b479f2a1-fd8f-487e-8d46-1cca5572a6a1",
"option_name": "Product Cat 1",
"elements": []
},
{
"option_id": "b479f5f1-fd8f-487e-6f46-1f3a5572a6a8",
"option_name": "Product Cat 2",
"elements": []
},
{
"option_id": "0549sda1-fd8f-487e-4d46-1f3a5572a6a0",
"option_name": "Product Cat 3",
"elements": []
},
{
"option_id": "a479fcb1-fd8f-487e-8d46-1f3a5572a6bb",
"option_name": "Product Cat 4",
"elements": []
}
]
},
{
"element_id": "05bea614-6dc6-4c89-99db-fa6fa791728b",
"element_name": "payment_method",
"element_type": "S",
"label": "Payment Method",
"required": false,
"display": true,
"options": [{
"option_id": "b479f2a1-fd8f-487e-8d46-1cca5572a6a1",
"option_name": "Cash",
"elements": []
},
{
"option_id": "0549sda1-fd8f-487e-4d46-1f3a5572a6a0",
"option_name": "Credit Card",
"elements": [{
"element_id": "4745aca7-beb6-4892-9f68-05b1609e56d9",
"element_name": "credit_card",
"element_type": "CC",
"label": "Credit Card"
},
{
"element_id": "42159553-f2c3-4bab-978c-6ac76e65989b",
"element_name": "cc_exp_month",
"element_type": "T",
"label": "Expiration Month"
},
{
"element_id": "9b693880-210b-4946-bf9c-da99a44b3fb6",
"element_name": "cc_exp_year",
"element_type": "T",
"label": "Expiration Year"
},
{
"element_id": "14c7b16d-5595-42fb-ba75-6517ffbd0cdc",
"element_name": "cc_code",
"element_type": "T",
"label": "Code"
},
{
"element_id": "56f6ebf7-4dc0-4609-a2fc-dc7d19859e69",
"element_name": "billing_first_name",
"element_type": "T",
"label": "Billing First Name"
},
{
"element_id": "1f084d95-be3d-4bba-814b-83a51f27e0df",
"element_name": "billing_last_name",
"element_type": "T",
"label": "Billing Last Name"
}
]
}
]
}
]
}]
}}
As you can see, this json has nested structure and there is no limit to how deep the nesting can go. So we have a complex and nested form. The question is - how do we maintain a single form document which gets updated when the form element's value changes.I used useState hook and maintained a state object at the top level and have passed the nested values back to the parent form using callbacks (a deep callback chain is formed but gets the work done). However, every time a single value change, the entire form is rendered which isn't very optimal. Can anyone suggest a better solution? How would an expert React developer handle such a use-case?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|