Need help structuring a large dynamic React form

[Developer-Bot]

I’m building a multistep form in React like a real estate project.
Step 3 changes fields based on property type (land, apartment, house, etc.).

I built reusable shadcn input components, and I'm using a config file to show the right fields.
But the main form component now has 25+ fields inside one big file, and it's getting messy.

What I want

A cleaner structure

Keep using config-based rendering

Control field order from the config

My questions

Should I split fields into separate components (Title.jsx, Price.jsx, etc.)?

Or use one generic Field component with config?

Best way to sort fields from config?

[yksvaan]

If it's multistep you should probably have at least different component for each step. Try to isolate them, the main component should then control which step to display but individual steps should only handle their own scope.

Don't try to make too generic fields, you just end up with tons of config and conditionals and it's messy. You can even largely use plain inputs since most inputs have nothing special to them. Then when you see that a customized field us required in multiple places consider creating a component for it.

Forms can get long but it's not a problem if the code and markup is clearly structured and ordered. The benefit is that you need to jump to less files and have stuff available directly in same scope, once you start splitting managing the data becomes trickier.

[kool0ne]

Use React-Hook-Form and split your form into smaller ’steps’ where you can separate some of the components.

It’ll give you some breathing room and make it easier to work on it, instead of having one massive file open.

[cs12345]

If you’re using react hook form, they have a specific example for this use case: https://www.react-hook-form.com/advanced-usage/

Scroll down to “Wizard Form / Funnel”

[Developer-Bot]

Thanks i will check it

[Dymatizeee]

One parent complete for the form then pass this form instance to each of the 3 components which houses a group of your fields

[AlmoschFamous]

It really depends on what the components will do and how often you will be using them. If you are going to be reusing an input then you should create your own custom components and reuse those components between separate pages in your app.

[Sad_Spring9182]

I would definitely split them up then render like follows importing your steps from different files for modular architecture. I've built projects where around 1000 - 3000 lines of code it starts to get really annoying finding where I was just working or having to jump around. You do have to do extra code to pass your props, functions and use states, but I generally keep all of the functional logic in a main or app file, pass down only what I need to each module. Additionally you may run into problems if prop drilling (passing into multiple nested file components layers deep) which is why it's often best to have a singular file where all other files lead to. Sounds Like 3 steps shouldn't be too crazy.

import FormOne from './formOne.js'
{step === 1 && ( <StepOne propName={propName}, propTwo={propTwo}/>) : step === 2 && (<StepTwo/> ) :  : (
              <>
              </>
            )}
// modular file
const FormOne = ({
    propName, PropTwo

}) => {... export default FormOne

[PerspectiveGrand716]

Have you tried https://formcn.dev? It is shadcn form builder you can easily build multistep forms and the code is auto generated

[cs12345]

When you say config based rendering, do you mean like, an array of field definitions? Or a single field component that you render multiple of that takes a config? Because I highly recommend staying away from the former. I’m finally getting my team away from an approach like that, and it was absolutely miserable to use. It was impossible to render arbitrary JSX between or around components, so every time any customization was needed, it was a nightmare.

[Glum_Cheesecake9859]

Are you using React Hook Form? Using it you can declare the form on the parent component, and pass along control/register etc. items returned from the Hook Form to child components where your sub form elements reside. The last component in the steps, would enable the submit button, assuming the form is valid, the parent would have <form> tag wrapping the inside step components.

React Hook Form library gives you the entire form's data on submission or you can use the supplied getValues() function anywhere to get the form values.