#content

Introduction

Forms may look simple, but there are many different features and functionality to forms. For developers, there is an art to constructing forms. React makes constructing and customizing forms much easier for developers, and that's why it's such a popular choice.

What are controlled components?

Controlled components in React are those in which form data is handled by the component's state. Whereas uncontrolled components are those in which the form data is handled by the DOM itself.

Why use controlled components?

Controlled components offer a number of benefits over uncontrolled components, including:

• More control over the form's behavior.
• Easier to implement form validation.
• Better accessibility practices.

Creating a controlled component in React

To create a controlled component in React, you need to:

1. Create local state for the form input(s).
2. Set the value prop of the input(s) to the state value(s).
3. Use the onChange event to update the state when the input(s) change.
4. Use the onSubmit prop of the form element to handle the form submission.

Preventing the default form submission behavior

In React, you can prevent the default form submission behavior by calling the preventDefault() method on the event object that is passed to the onSubmit callback function.

Disabling the submit button when the form is invalid

To disable the submit button when the form is invalid, you can use the disabled prop of the submit button element. Set the disabled prop to true when the form is invalid, and to false when the form is valid.

Connecting the label with the input

To connect the label with the input in a controlled component, you can use the htmlFor prop on the label element. Set the htmlFor prop to the ID of the input element.

Example

The following is an example of a controlled component in React:

import React, { useState } from 'react';
 
const ControlledForm = () => {
  const [name, setName] = useState('');
 
  const handleSubmit = (event) => {
    event.preventDefault();
    // TODO: Validate the form data
    // Submit the form data to the server
    // Clear the form data
    setName('');
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input id="name" type="text" value={name} onChange={(event) => setName(event.target.value)} />
      <button type="submit" disabled={name === ''}>
        Submit
      </button>
    </form>
  );
};
 
export default ControlledForm;

Conclusion

This is just a basic introduction to controlled components in React. There are many other features and functionality that you can implement using controlled components.