Terlalu Banyak State? Atasi Dengan Ini!

Pada saat kita membuat sebuah form di ReactJS, pastinya kita harus menyimpan setiap data dari user input, benar? Tapi sayangnya kebanyakan dari kita mengimplementasikan kode untuk 1 input 1 state seperti berikut:

import React, { useState } from 'react';

function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [phoneNumber, setPhoneNumber] = useState('');
  const [email, setEmail] = useState('');

  return (
    <form>
      <label>
        First Name:
        <input type="text" value={firstName} onChange={e => setFirstName(e.target.value)} />
      </label>
      <br />
      <label>
        Last Name:
        <input type="text" value={lastName} onChange={e => setLastName(e.target.value)} />
      </label>
      <br />
      <label>
        Phone Number:
        <input type="text" value={phoneNumber} onChange={e => setPhoneNumber(e.target.value)} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" value={email} onChange={e => setEmail(e.target.value)} />
      </label>
      <br />
    </form>
  );
}

export default Form;

Kode diatas bisa kita per-simple dengan menggunakan 1 state saja, berikut contohnya:

import React, { useState } from 'react';

function Form() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    phoneNumber: '',
    email: '''
  });

  const handleChange = e => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  }

  return (
    <form>
      <label>
        First Name:
        <input type="text" name="firstName" value={formData.firstName} onChange={handleChange} />
      </label>
      <br />
      <label>
        Last Name:
        <input type="text" name="lastName" value={formData.lastName} onChange={handleChange} />
      </label>
      <br />
      <label>
        Phone Number:
        <input type="text" name="phoneNumber" value={formData.phoneNumber} onChange={handleChange} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" name="email" value={formData.email} onChange={handleChange} />
      </label>
      <br />
    </form>
  );
}

export default Form;

Atau kita juga bisa menggunakan hook useReducer dari React untuk handling form

import React, { useReducer } from 'react';

const initialState = {
  firstName: '',
  lastName: '',
  phoneNumber: '',
  email: ''
};

const formReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return { ...state, [action.field]: action.value };
    default:
      return state;
  }
};

function Form() {
  const [formData, dispatch] = useReducer(formReducer, initialState);

  const handleChange = e => {
    dispatch({
      type: 'UPDATE_FIELD',
      field: e.target.name,
      value: e.target.value
    });
  }

  return (
    <form>
      <label>
        First Name:
        <input type="text" name="firstName" value={formData.firstName} onChange={handleChange} />
      </label>
      <br />
      <label>
        Last Name:
        <input type="text" name="lastName" value={formData.lastName} onChange={handleChange} />
      </label>
      <br />
      <label>
        Phone Number:
        <input type="text" name="phoneNumber" value={formData.phoneNumber} onChange={handleChange} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" name="email" value={formData.email} onChange={handleChange} />
      </label>
      <br />
    </form>
  );
}

export default Form;

Di atas, kita menggunakan useReducer untuk mengelola data form. Kita membuat sebuah objek state awal yang berisi properti untuk masing-masing input field. Selanjutnya, kita membuat sebuah fungsi reducer yang digunakan untuk memperbarui state sesuai dengan tipe aksi yang diterima.

Ketika pengguna mengetik di salah satu input field, fungsi handleChange dipanggil dan mengirimkan aksi dengan tipe UPDATE_FIELD, nama field dan nilai sebagai properti. Fungsi reducer kemudian menggunakan nama field untuk memperbarui properti yang sesuai dalam objek state.

Semoga Bermanfaat!