Handling Large Form with React

Question

I have a large registration form in a React-redux page.

I do not need to bind any data to the forms, as it will always load blank, and on submit can just send data to API and be redirected to a "Please check our email" page.

The issue I am also having, is that I am using MaterializeReact and using their custom Components. This just renders as a input with a name, so traditional formdata would be intact..

All the examples online, seem to want me to create a state, then for each input element I bind the state to it, and then all my values will be in this.state.

It seems a little bit of a long way around, as I have 30, 40 fields.

I found a way using refs, but I did no want to use it as I know ref strings are being deprecated. The ref solution is like so:

submitform() {
    const formData = {};
    for (const field in this.refs) {
      formData[field] = this.refs[field].value;
    }
    //Now I have the all values wrapped in a object to send to server
  }

<form>
  <Input ref="firstName" />  //MaterializeReact Component. Renders as <input>
 <button type="button" onclick="{submitForm}" />
</form>

What would be the recommend way of getting the value of many inputs without the hassle of binding each one?

Answer 1

The two recommended ways to handle forms by the react team are controlled and uncontrolled components. Creating and maintaining a state is no more round-about than using a uncontrolled components like your initial suggestion with refs where you built your own state called formData before submitting the data.

Here's the equivalent solution using state, and it won't be deprecated.

submitform() {
    const formData = this.state
    //Now I have the all values wrapped in a object to send to server
}

handleOnChange = (e) => {
    const { value, name } = e.target
    this.setState({ [name] : value })
}

<form>
    <Input name="firstName" onChange={this.handleOnChange} /> //MaterializeReact Component. Renders as <input>
    <button type="button" onclick="{submitForm}" />
</form>

Answer 2

While working with large forms there are some challenges which you may face:

• Performance Issues

You're components must be designed in a way that the changes in one input should not affect the other until it's required.

• Scalabilty

It should be easy to add & remove form controls.

• State Management

It's not easy to maintain a centralized state with all controls information like touched, error etc.

• Dynamic Changes

For example: Disable a field based on the value of other field.

• Validations & Errors
• Nested Forms

So, it's better to save effort & time by using some form library.

Checkout this library react-reactive-form

Some of the cool features are:

• UI independent.

• Zero dependencies.

• Nested forms.

• Subscribers for value & status changes of controls.

• Provides a set of validators & also supports custom sync & async validators.

• FormGenerator api to create large forms with less code.

• Better form management with FormGroup & FormArray apis.

• Customizable update strategy for better performace with large forms.