Dynamic Recursive Form Rendering for Nested Data — Real-World Usage From My Client Project (Black Rock Visuals Website)

#webdev #react #typescript #forms

You all have probably created forms if you are a CS student and learned web app development, or completed projects for your own self-assigned work or client projects.

Now, forms are used for collecting data and displaying it in the way it is written, using HTML, JSX, or TSX. But your schema, input fields, or the sample data etc. that you want to render as forms — in most cases — it's going to be simple for you, and you are going to select one attribute from that form data and write its adequate and appropriate respective input field tags, containers, and a handle function for form input. (Which is the Hardcoded Form Method)

But What If the Form Data Is Nested?

But what if the form that you are going to design and render is based on nested data — a whole object consisting of arrays and objects that will further contain arrays or objects or maybe both, and some would be as normal as they were at a basic level like strings, numbers, etc.?

How will you design and make forms for such large content (data that can be nested)?

At this point, if you are manually designing every input field, it becomes:

Time-consuming
Code-heavy
Difficult to maintain
And forces you to write individual handleInput functions for every type or field

For Instance:

File input needs special handling
Strings are simple but could be nested in objects
Some arrays hold objects, and some may hold just primitive values

Now, if you are going to render them one by one, it will cost you a lot of time and lines of code. And not only this — it might also cause you to write a handleInput function for each and every unique or different field like file input fields, string input handlers, and other inputs that are part of some proper objects and exist at a proper place in an array or object.

So in order to handle such forms, we learn dynamic form rendering in a recursive way, where you keep rendering the form based on the types of the attributes of form data — i.e., whether object, array, string, file, etc.

This not only gives you a great experience in designing real-world, industrial and production-level forms — a simple form might be easy to make that has no nested layout and structure — but a nested one, especially used in:

Portfolios
Surveys
Personal inquiries
Modern and expert ways of data gathering

…requires a different approach.

Now consider this: if a UI is designed in such a way to enquire the user about preferences (and analyze using AI), and then keeps rendering them further fields accordingly — this is what a dynamic form recursively rendered might look like.

I used this in my client project (Black Rock Visuals Website), particularly in the Portfolio Management component, where a data type using TypeScript is given along with the initial data so that the form can be served accordingly.

Now You May Ask: How Many Ways Are There to Render Forms in the Frontend?

1. Hardcoded Forms (Static Rendering)

How: You directly write HTML/JSX form fields in your component

<form>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <button type="submit">Submit</button>
</form>

Pros: Simple and fast for small forms.
Cons: Not scalable, difficult to update dynamically.

2. Form Rendered From JSON Schema (Dynamic Rendering)

How: Define form structure in a JSON or object schema and loop through it to render fields

Example:

const formSchema = [
{label:"Name", type:"text", name:"name"},
{label:"Email", type:"email", name:"email"}
]

return (
<form>
{formSchema.map((field) => (
<input key={field.name} type={field.type} name={field.name} placeholder={field.label}/>
)}
</form>
)

Pros: Very scalable, easier to maintain, supports nested forms.
Cons: Requires a solid schema structure and logic.

3. Using Form Libraries

Popular Ones: Formik, React hook form, Final Form, Redux Form

Why: They handle State Management, validation, and dynamic rendering more elegantly

Example:

const {register, handleSubmit} = useForm();
return (
<form onSubmit={handleSubmit(data => console.log(data))}>
<input {...register("name")}/>
<input {...register("email")}/>
<button type="submit">Submit</button>
</form>
)

Pros: Robust validation, dynamic support, less boilerplate.
Cons: Slight learning curve.

4. Component-based Modular Forms

How: Create reusable Input, Select, TextArea components

Use case: Great for large forms or enterprise apps.

Example:

<Input label="Name" name="name"/>
<Select label="Country" options={countries} name="country"/>

5. Recursive Form Rendering (For Deeply Nested Fields)
How: Use recursion to render nested structures (like a survey form, conditional forms, hierarchical data schema).

Example:

const portfolioData = {
  username: "",
  bio: "",
  projects: [
    {
      title: "",
      images: [ { url: "" }, { url: "" } ],
      tags: ["", ""],
      clientReviews: [
        {
          name: "",
          comment: ""
        }
      ]
    }
  ]
}

Pros: Can render arbitrarily deep forms (e.g. dynamic survey forms, hierarchical data).
Cons: More complex logic required.

6. AI or NLP-Driven Form Builders

How: Users input what they want ("Create a form with name, email, message"), and your system generates the schema and renders it.

Example Use: No-code/low-code platforms or smart admin dashboards.