1. Form Handle

Pada materi ini kita akan mempelajari basic dari bagaimana membuat form pada reactjs. Setiap aplikasi pasti memiliki form yang digunakan untuk menyimpan data dan mengupdate data. Hal ini sudah umum dan pasti kita semua pernah mengguankan form yang ada pada aplikasi.

component/select.tsx

import clsx from "clsx";
import { ChangeEvent } from "react";

type Variant = "solid" | "outline";
type ColorSchema = "blue" | "red" | "green";

interface ButtonProps {
  options: { value: string | number; label: string }[];
  name: string;
  isError?: boolean;
  messageError?: string;
  id: string;
  value: string | number | null;
  onChange: (e: ChangeEvent<HTMLSelectElement>) => void;
}

const Select: React.FC<
  ButtonProps & React.SelectHTMLAttributes<HTMLSelectElement>
> = ({
  options,
  value,
  name,
  id,
  messageError = "wajib di isi",
  isError = false,
  ...props
}) => {
  return (
    <section>
      <select
        value={value}
        name={name}
        id={id}
        className={clsx(`w-full h-8 border rounded px-2`, {
          "border-red-500 border-2": isError,
          "border-gray-700": !isError,
        })}
        {...props}
      >
        {!!value === false && <option>Pilih</option>}
        {options?.map((option, index) => (
          <option key={index} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      {isError ? (
        <p className="text-red-500 font-bold">{messageError}</p>
      ) : (
        <></>
      )}
    </section>
  );
};


export default Select;

app/page.tsx

"use client"; // gunakan use client karena ada onChange pda komponen
import { ChangeEvent, useState } from "react";
import BelajarState from "./module/belajarState";
import Card from "./latihan/Card";
import Button from "./component/Button";
import InputText from "./component/InputText";
import Select from "./component/Select";
import Label from "./component/Label";

interface Value {
  title: string;
  author: string;
  year: number | string;
}

const Home = () => {
  const [values, setValues] = useState<Value>({
    title: "",
    author: "",
    year: "",
  });

  const handleChange = (event: ChangeEvent<any>) => {
    setValues((prevValues) => {
      return {
        ...prevValues,
        [event.target.name]: event.target.value,
      };
    });
  };

  const handleSubmit = (e: ChangeEvent<any>) => {
    e.preventDefault();

    alert(JSON.stringify(values));
  };

  return (
    <main className="space-y-5">
      {JSON.stringify(values)}
      <h1 className="text-red-500 font-bold">Latihan Form</h1>
      <form onSubmit={handleSubmit} className="space-y-3">
        <section>
          <Label htmlFor="author" isRequired title="Penulis" />
          <InputText
            placeholder="Nama Penulis buku"
            id="author"
            name="author"
            value={values.author}
            onChange={handleChange}
          />
        </section>

        <section>
          <Label htmlFor="title" isRequired title="Judul Buku" />
          <InputText
            placeholder="Nama Judul buku"
            id="title"
            name="title"
            value={values.title}
            onChange={handleChange}
          />
        </section>
        <section>
          <Label htmlFor="year" title="Tahun Terbit" />
          <Select
            value={values.year}
            name="year"
            onChange={handleChange}
            isError
            id="year"
            options={[
              {
                value: 2020,
                label: "2020",
              },
              {
                value: 2021,
                label: "2021",
              },
              {
                value: 2022,
                label: "2022",
              },
              {
                value: 2023,
                label: "2023",
              },
            ]}
          />
        </section>
        <section>
          <Button type="submit" colorSchema="blue" title="Simpan" />
        </section>
      </form>
    </main>
  );
};

export default Home;