Controlled VS Uncontrolled Form di React.Js

Form merupakan fitur HTML yang digunakan untuk menerima input dari user. Form di React.js dapat di-handle dengan dua cara yaitu controlled dan uncontrolled. Apa sih perbedaannya? simak contoh kode dibawah ini.

Uncontrolled Form

Kapan pakai nya? kalau kita hanya perlu tau value sebuah form ketika ingin submit. Jadinya ngga perlu pasang atttribute onChange. Contoh kode :

<form
        onSubmit={(e) => {
          e.preventDefault()
          const formData = new FormData(e.target)
          const obj = {
            location: formData.get('location') ?? '',
            animal: formData.get('animal') ?? '',
            breed: formData.get('breed') ?? '',
          }
          setReqParams(obj)
        }}
      >
        <label htmlFor="location">
          Location
          <input name="location" id="location" placeholder="Location" />
        </label>

        <label htmlFor="animal">
          Animal
          <select
            onChange={(e) => {
              setAnimal(e.target.value)
            }}
            onBlur={(e) => {
              setAnimal(e.target.value)
            }}
            id="animal"
            value={animal}
            placeholder="Animal"
          >
            {ANIMALS.map((animal) => (
              <option value={animal} key={animal}>
                {animal}
              </option>
            ))}
          </select>
        </label>

        <label htmlFor="breed">
          Breed
          <select
            id="breed"
            name="breed"
            disabled={breeds.length === 0}
            placeholder="Breed"
          >
            {breeds.map((breed) => (
              <option value={breed} key={breed}>
                {breed}
              </option>
            ))}
          </select>
        </label>
        <button>Submit</button>
      </form>

note: Animal masih pake onChange karena untuk breedList kita perlu tau ras / jenis / breed dari hewan apa yang ingin dimunculkan. Misal animalnya anjing, maka breedList akan render jenis breed yang ada di anjing. Misalnya, Husky dan Bulldog. Ngga mungkin dong breed anjing ada British Short hair / Maine Coon. Nah, kasus tersebut namanya controlled form.

Controlled Form

Secara umum, kita listen input dari user dengan onChange lalu simpan valuenya di state.

import React, { useState } from 'react';

const ControlledForm = () => {
  // State to hold the form data
  const [formData, setFormData] = useState({
    username: '',
    email: '',
  });

  // Event handler for form input changes
  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  // Event handler for form submission
  const handleSubmit = (event) => {
    event.preventDefault();
    // Do something with the form data, e.g., send it to a server
    console.log('Form submitted with data:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Username:</label>
        <input
          type="text"
          id="username"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;