Form Handling in React

  In React, handling forms is an essential part of interacting with users. In this topic, we will explore how to handle user input and events in forms.

What is Form Handling in React?

  Form handling in React refers to the process of controlling form data and how it interacts with the application's state. In React, we can use component state to store form values and respond to user changes.

• Controlling form state: We use the component's local state to store the values of form fields.
• Events: We use events like `onChange` and `onSubmit` to interact with forms.
• Controlled forms: In a controlled form, the value of each field is bound to the component's state.

  Let's look at a simple example of a controlled form in React:

const Formulario = () => {
  const [name, setName] = useState('');

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('Name submitted: ' + name);
  };

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

Controlled vs. Uncontrolled Forms

  In React, there are two approaches to handling forms: controlled and uncontrolled forms. A controlled form is one whose state is managed within React, while in an uncontrolled form, the DOM manages its own state.

• Controlled forms: The form state is stored in the component and updates when the user interacts with the fields.
• Uncontrolled forms: Input fields manage their own state without relying on the component's state.

  Here is an example of an uncontrolled form:

const UncontrolledForm = () => {
  const inputRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('Name submitted: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

Form Validation

  Form validation is crucial to ensure that the entered data is correct. In React, validation can be performed within the `onSubmit` event handler, checking values before submission.

const FormWithValidation = () => {
  const [name, setName] = useState('');
  const [error, setError] = useState('');

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

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!name) {
      setError('Name is required');
    } else {
      setError('');
      alert('Form submitted');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input 
          type="text" 
          value={name} 
          onChange={handleChange} 
        />
      </label>
      {error && <p className="text-red-500">{error}</p>}
      <button type="submit">Submit</button>
    </form>
  );
};