1

I'm currently refactoring an older legacy application and use React to rebuild some of the former functionality. This application has a form which has +10 different input fields. The aim is to kind of built a wizard that leads the user through fields, instead of bombarding them with +10 fields at once.

Now, I've thought a little about how to tackle this. I could have a component for each step (lets say three step) and each one contains some detailed information about the form. This could then be wrapped up with a parent-component to deal with the state.

But this would imply that each "step"-component is very specific to its fields and that makes very static.

Maybe instead of writing out all the steps into individual components, I could have a very generic one, which takes a number of elements, but doesn't care about anything regarding to this specific form. The idea would be to externalise the form's structure into a json object, which will define the form and provides the information on how to build it.

Something like:

{"user_input_form": {
    "steps": [{
        "index": 1,
        "fields": {
            "first_name": {
                "required": true,
                "label": "The first name label",                
                "value": "",
                "type": "text",
            },
            "last_name": {
                "required": true,
                "label": "The last name label",
                "value": "",
                "type": "text",
            }
        }
    },
    {
        "index": 2,
        "fields": {
            "date_of_birth": {
                "required": true,
                "label": "The birthday label",
                "value": "",
                "type": "date",
            },
            "home_country": {
                "required": false,
                "label": "The last name label",
                "value": "",
                "type": "select",
                "options": ["England", "Wales", "Scotland", "Northern Ireland"]
            }
        }
    }]
}

Whilst the form component is tightly tied to the json structure, it would not be tied to the underlying data.

Is that a common thing to do or rather something to avoid?

Cheers

Improve this question
1

1 Answer 1

Reset to default
6

The trouble with this and similar dynamic form building aproaches is that you end up reinventing HTML forms.

In your case if you instead have a simple switch or if block in your render method and output the HTML for the step directly, it would look almost identical to your json object method minus the code to change the object to HTML.

Unless you are forced to invent a dynamic form system, due to allowing the user to design forms at run time, I would avoid going down this road.

Utilise the react/angular/razor/whatever templating language you already have rather than creating a new one.

Improve this answer
1
  • JS devs understandably favor JSON representation as it easier to manipulate (and re-use as data in other tools like Swagger or docs, or use jsonschema to validate your form on a NodeJS server). Usually the benefit isn't worth the hassle although in some cases it might pay off in the long run. There have been some endeavors to do this, see for example react-jsonschema-form
    – webketje
    Mar 10, 2020 at 16:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.