Formik dan Yup Cara simple membuat React Form

Membuat form pada react terasa melelahkan apabila terdapat banyak field input serta validasi pada masing-masing field tersebut. Dengan cara ‘manual’ mengharuskan kita menulis banyak baris kode, sehingga sangat rentan terhadap bug. Kabar baiknya Masalah ini dapat diatasi dengan menggunakan library Formik dan Yup.

Supaya bisa langsung mengetahui perbandingannya, mari kita lihat contoh form sederhana berikut.

import React, { useState } from 'react';

const ExampleForm = () => {
  const [formValues, setFormValues] = useState({ name: '', email: '' });
  const [isSubmitting, setSubmitting] = useState(false);

  const handleSubmit = event => {
    event.preventDefault();
    setSubmitting(true);

    setTimeout(() => {
      console.log(formValues);
      setSubmitting(false);
     }, 1000);
  };

  const handleChange = event => {
    setFormValues({ ...formValues, [event.target.name]: event.target.value });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        placeholder="Your name"
        value={formValues.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        placeholder="Your email"
        value={formValues.email}
        onChange={handleChange}
      />
      <button type="submit" disabled={isSubmitting}>Submit</button>
    </form>
  );
};

export default ExampleForm;

Form diatas memiliki state name dan email, apabila kita ingin memasang validasi pada kedua field input tersebut, maka setidaknya dibutuhkan logic validasi tambahan dalam function handleChange atau handleSubmit. Kira-kira seperti ini,

const newErrors = {};

if (!formValues.name) {
  newErrors.name = 'Name is required';
}

if (!formValues.email) {
  newErrors.email = 'Email is required';
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(formValues.email)) {
  newErrors.email = 'Invalid email address';
}

Mulai dari sini kita bisa melihat permasalahannya. Ketika field input dibuat semakin banyak, maka akan semakin banyak juga kode serta rumitnya validasi yang akan kita buat. Sekarang mari kita lihat bagaimana Formik dan Yup mengatasi masalah ini,

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email address').required('Email is required'),
});

const ExampleForm = () => (
  <Formik
    initialValues={{ name: '', email: '' }}
    validationSchema={validationSchema}
    onSubmit={(values, actions) => {
      setTimeout(() => {
        console.log(values);
        actions.setSubmitting(false);
      }, 1000);
    }}
  >
    {({ errors, touched, isSubmitting }) => (
      <Form>
        <Field type="text" name="name" placeholder="Your name" />
        {errors.name && touched.name && <div>{errors.name}</div>}
        <Field type="email" name="email" placeholder="Your email" />
        {errors.email && touched.email && <div>{errors.email}</div>}
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>
      </Form>
    )}
  </Formik>
);

export default ExampleForm;

Terlihat pada blok kode diatas penulisan form menjadi lebih simple. Dengan Component <Field> dari Formik kita tidak perlu mem-passing Props seperti onChange, onBlur serta value. Tidak hanya itu, Formik juga menyediakan state bawaan isSubmitting, error dan touched untuk mempermudah kita mengkustomisasi tampilan form pada saat terdapat error pengisian pada salah satu filed atau saat call API sedang berlangsung.

Dalam variabel validationSchematersimpan semua skema validasi pada tiap field yang sudah dibuat. penulisan skema dengan chain rules memungkinkan kita menulis validasi dengan lebih mudah dah ringkas.

email: Yup.string().email('Invalid email address').required('Email is required')

Pada blok kode diatas, cara untuk memvalidasi apakah user memasukan text email yang valid atau tidak, tidak perlu menggunakan regex, cukup dengan melakukan chain dengan method email({errorMessage}). Dan jika ingin memvalidasi untuk field wajib kita dapat melakukan chain dengan method required({errorMessage}). Tentu saja masih banyak lagi method validasi bawaan yang disediakan oleh Yup seperti url(), nullable(), positive() dst.

Kesimpulannya, membuat form react dengan Formik dan Yup adalah pilihan yang lebih baik dibandingkan membuat form manual karena proses pembuatan form akan menjadi lebih mudah, pemeliharaan lebih mudah, dan tentu saja beban pengembangan yang kita tangggung semakin lebih ringan.

Ref:

Dokumentasi resmi Formik : https://formik.org/docs/tutorial
Halaman Package Yup : https://www.npmjs.com/package/yup