How to generate dynamic form based on data received from JSON

Question

I am trying to generate dynamic form based on the following criteria

1. Form fields must be generated based on values from table1 and table2 key from entityTable array. sometime table1 and table2 key may contain multiple values. In that case I need to split the values based on comma(,) and consider them individual values.
2. Now, I need to compare those values received from table1 and table2 key with the keys of recievedData object. If there is match then I need to generate form field with initialValue of corresponding key's value.
3. The form field must be disabled based on the key values of table1_edit and table2_edit from entityTable array. If value is 0, the form field must be disabled.

Here is the object

const data = {
    "recievedData": {
        "pan_number": "3213265",
        "gender": "M",
        "last_name": "45645",
        "pan_status": "VALID",
        "middle_name": "null",
        "rece_pan_num": "435353",
        "first_name": "464",
        "sent_pan_num": "546546",
        "pan_name": "some name",
        "pan_holder_title": "null"
    },
    "questions": [],
    "entityTable": [
        {
            "id": 1,
            "table1": "pan_number",
            "table2": "sent_pan_num,rece_pan_num,pan_status",
            "table1_edit": "1",
            "table2_edit": "0",

        },
        {
            "id": 2,
            "table1": "pan_name",
            "table2": "first_name,middle_name,last_name",                    
            "table1_edit": "1",
            "table2_edit": "0",

        },
        {
            "id": 3,
            "table1": "gender",
            "table2": "pan_holder_title",                    
            "table1_edit": "1",
            "table2_edit": "0",
        }
    ]
}

What I have tried so far, I didn't post it here because it may create confusion with understanding of my requirements. Can someone please help me with this?

Answer 1

I am assuming you are after a working solution rather than a programming challenge. If so, consider existing solutions: https://github.com/ineffablep/react-schema-form

This particular library allows you to do exactly what you need and supports different types of inputs (which can get tricky). Given this is an option, your problem becomes much easier to tackle - you just need to convert one JSON into another.