Convert your JSON to Forms in React
Blogs
February 23, 2021

Convert your JSON to Forms in React

Introduction

Forms are an important part of any application. With React, building forms and managing them can be quite a mundane task. Each form needs to be built from scratch while handling validations and even taking care of the performance aspect. Managing all these things manually in each and every form becomes a challenge when the application grows quite big and you end up with hundreds of forms in your application. Fortunately, this process can be automated and can save a lot of time spent working on individual forms. One of the ways to achieve this is with the help of the JSON object.

In this blog, we’ll be building a form generator component that converts a custom, JSON schema into a form with custom field types and our own validation rules. There are already packages available like react-jsonschema-form (which has a huge footprint) and react-schema-form (which is lightweight but only supports material-ui), but the advantage of having our own component is the size, performance, and customization that we can add to it. We can pick our own JSON schema, set our own validation rules, and easily style it the way we want.

We’ll not be building everything from the ground up but we will be using react-final-form to build our form. It is a really lightweight form builder that is perfect for what we are looking to build. We just need to write a custom logic to convert our JSON to individual form elements.

Let’s first come up with a json schema.

So, each field will be a key in our schema and the object will support element type, label, placeholder, required flag, and validation as the properties. This structure will be a bit different for radio, checkboxes, and dropdown.

For the simplicity of this article, we will only include text, radio, and select input types. Other field types can be supported in the similar fashion.

Now that we have our JSON schema ready, let's use react-final-form to generate fields and look at the syntax of react-final-form.

It has a render method that takes in a function that returns our form. However, instead of our normal input tags, we use the ‘Field’ component from react-final-form. Hence, we need a separate ‘Field’ component for each of our input types.

We can create a new component for each of these field types, like below, that will simply return the Field component with the provided name and placeholder for the text input field.

For radio and select elements, we need options as well as those which we have defined in our JSON as array. Let’s convert it to a simple object.

With this function, our options array in JSON schema will be converted to an object.

This will enable us to work with the options much easier. We shall pass this to our RadioField component as props. Our RadioField will look something like this.

SelectField can also be created using the same way we did for RadioField.

Now that we have all our required functions, let’s put them together.

We can clean this code up to make it a bit more readable.

We now have a basic version of our JSON to form converter working. With some basic styling, we have a form that looks like this.

Validation

Remember, we have a validation field and required flags in our JSON schema but we haven’t used them anywhere. React Final Form allows us to validate the form with the ‘validate’ prop. We need to pass in a function that will return the validation errors as an array of objects with field name and error message.

We will be using yup, which is a validation library and it will handle all the validation logics for us. Let’s look at how yup works.

We need a validation schema that contains all the rules for each of our fields. A simple function like below can create our validation schema from our JSON schema.

This will check for our ‘required’ flag and ‘validation’ regex in our JSON schema. You can go ahead and apply custom logic here based on additional validation rules in your JSON schema like ‘minLength’, ‘maxLength’, etc.

Now let’s create a function that will validate our form against the above validation schema.

The ‘abortEarly’ false flag will make sure all the fields are validated. If you don’t want that behavior, you can skip it.

Let’s plug the validate function in our Form component.

The error message will then be available in the ‘meta’ prop inside the ‘Field’ component. We need to add it to all our custom Field components like below.

If you leave all fields empty and hit submit, you should see error messages like below.

Pro Tip

Right now, if you try to see the re-rendering pattern of the form, you will notice that on every key press, the whole form is re-rendered. You can simply prevent this behavior and only re-render the field where input value has changed by adding subscription={{ submitting: true, pristine: true }} flag to the Form component.

With a little bit of styling and bootstrap css, the form component is now ready and the final end product looks like this.

And there you have it! You have a fully functional component that’ll convert your JSON schema into forms in React. You can add your own validation rules and styling options to suit the need of your application.

Thank you for reading this blog. If you liked it, do checkout our other blogs and articles from Botsplash as well.

Sumit Bajracharya
Director of Technology
STAY CONNECTED
TAGS
No items found.
RELATED ARTICLES

Subscribe to our newsletter... we promise no spam

Botsplash Logo
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.