Dynamic JSON Defined Forms in ReactJS
Last year, I completed my first freelance gig. The job was to write a platform for entering tax relevant data, including uploading files that could be exported at the end of completing a series of answering questions. The “tax form”, consists of a series of questions about your employment status, income sources, family, etc. You know, all the tax relevant data.
Just for some background about the tech used for the platform: the backend consists of a few microservices written in Java and Spring Boot and the frontend is a ReactJS application. The services are hosted on an AWS ECS cluster and the uploaded files are stored in an S3 bucket.
Since frontend development has never been my forte, up until now, I wasn’t really sure how to best and most structured way to implement the tax form. Maybe I should have looked into some other ways before starting, but the code for the frontend turned out to be total nightmare. That’s why I recently decided to rewrite the frontend in a new way that I just recently learned and find completely fascinating.
How did I Learn this New Way of Implementing Forms?
From the end of October of last year up until the end of January this year, I had been working on a project of my own. While working on the project, I decided I wanted to use a ReactJS template and set out to buy one.
I ended up buying the Directory Template bootstrapious, which was already almost everything I wanted, but had to do some tweaking to get it to my likes.
The template contained a booking process which consists of pages that use a shared component that shows certain elements based on what is defined in the props that are passed into it. The props are formatted in JSON that is parsed inside of the component. I was easily able to add or remove things that I did or didn’t like just by changing the elements that are contained in the JSON file. I found this to be so revolutionary that I had to include it in my rework of the frontend for the tax platform.
This might be a standard way of doing things, but I have never seen someone talk about it so I wanted to share it.
Let Me Show You Exactly What I mean
So for the sake of simplicity and showing what I did for the tax platform, I created a Github repository in which the same kind of technique is being showcased. If you want to check it out, heres the link: https://github.com/Felix-Seip/dynamic-json-defined-forms-reactjs
The JSON File
In the repository, there is a data folder containing the JSON file that contains the definition of how each form should be laid out. You’ll see that there is a login form and a registration form:
I usually start off like this now, so that I know what my component, that will be used to show these forms should contain (buttons, text, tables, etc).
For each page, I define the elements that should be shown in the form. Each item contains a definition of whether it is an input and if so what type of input, if it is required, and so on. The more the complex the form gets, the more attributes are added to the JSON file.
What would more complex UI elements, such as tables or dropdowns look like? Here’s an example from the tax platform that I rewrote:
As you can see, it’s not much different than defining text or buttons. You just have to ensure that the things that you definitely need for each UI element are defined in the JSON file.
The Form Component
Now that we have the UI defined in a JSON file, we can move onto the form component that will render the defined elements.
The form component will need to be included in each page, passing in the JSON props that should be shown for each page.
In the form component itself, we need to map each defined UI element to a JSX component. This would look as follows:
In the form component I am using the map function and then determining what I want to do based on the items type. For example, if the type is a text, password or email element, I am mapping the element to a a FormGroup that contains an input. The input defines which kind of input it is based on the item type, defines the id so that we can save the data in the components state, and telling the input if it is required or not.
All in all the result of this form, when included in a login page, would look like this:
I didn’t have to declare each element separately, but instead let JSX and Javascript do the magic itself by taking the JSON file as an input to display each element.
By doing this, I can easily expand each page however I like and keep the same styling for each page, since the used classes are defined in the form component itself. If I need an extra element, I just need to define it in the JSON file and I’m good to go.
As you can see, this way of defining your forms can have major advantages in efficiency, simplicity and readability of your frontend code. I learned this the hard way, by having to refactor a complete code base into this type of templating and moving away from long files and moving to these simple and easily extendable form components.
I hope that this will help you in the future as well and that I was able to help you learn and improve how you write your forms.
If you enjoyed reading this article and found it helpful or need help in any way, please leave a comment or check out some of my other articles. Who knows, maybe I have touched upon another topic that you may find helpful as well.
