Controlled Forms in React

When it comes to handling user input in a React application, one common approach is to use a controlled form. In this blog post, we'll briefly explore what a controlled form is, its advantages, and provide an example of how to use it.

To get a more in-depth look into React forms and controlled components, read the official React Documentation here

What is a React controlled form?

In a controlled form, the state of the form is handled by the React component. Whenever the user enters data into an input field or selects an option from a form menu, the component's state is updated to reflect the new values. The component then re-renders with the updated state, which in turn updates the form with the latest values.

To create a controlled form, we need to define a state for each input field in the form. We also need to define an event handler for each input field that updates the state whenever the value of the input changes. Finally, we need to pass the state as the value prop for each input field.

Advantages of using a controlled form

1. Simplifies form handling: With a controlled form, the state of the form is managed by the component, making it easier to handle form input and processing.

2. More control over form behavior: Since the component controls the form state, it provides more control over the behavior of the form, such as disabling or enabling certain fields based on other field values.

Example of a controlled form

Let's say we have a simple form with two input fields: name and email. Here's an example of how we can create and use a controlled form using React:

import React, { useState } from 'react';

function ContactForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleNameChange = (e) => {
    setName(e.target.value);
  };

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(`Name: ${name}, Email: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleNameChange} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" value={email} onChange={handleEmailChange} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default ContactForm;

In this example, we define two state variables, name and email, and two event handlers, handleNameChange and handleEmailChange, which update the state whenever the input values change. We also define a handleSubmit function that logs the form data to the console when the form is submitted.

In the JSX code, we pass the state variables as the value prop for each input field and attach the event handlers to the onChange event of each input field.

Conclusion

A controlled form is a powerful and flexible way to manage user input in a React application. By controlling the state of the form, we can simplify form handling and gain more control over form behavior and input values.