ReactJS | 6. Menambahkan input collection

 6. Menambahkan input collection

---

Menambahkan Control Baru Ke Input Collection

Pada bagian ini akan membuat control input baru pada InputCollection

Input Checkbox

export const InputCheckbox = ({
                                  label , control, name,  required, rules, errors,
                              }) => {
    return <>
        <Controller
            control={control}
            render={({ onChange, onBlur, value }) => (
                <div className={"form-group " + (required ? "required" : "")}>
                    <label className="col-md-3 control-label">{label}</label>
                    <div className="col-md-8">

                        <input type="checkbox" onChange={() => {
                            onChange(value ? !value :  true)
                        }} checked={value ||  false} />
                        <ErrorMessage
                            errors={errors}
                            name={name}
                            render={({ message }) => <div className="text-danger pt-2">
                                <span >{message}</span>
                            </div>}
                        />
                    </div>
                </div>
            )}
            name={name}
            rules={rules}
        />
    </>
}

Keterangan

deklarasi fungsi

export const InputCheckbox = ({
                                  label , control, name,  required, rules, errors,
                              }) => {

InputCheckbox adalah nama komponent
label , control, name, required, rules, errors adalah parameter yang harus di miliki oleh input collection

deklarasi controller

<Controller
            control={control}
            render={({ onChange, onBlur, value }) => (

Controller adalah komponent yang membungkus semua input collection
control adalah pengatur dari input tersebut
onChange adalah fungsi callback yang di panggil ketika ada perubahan di form
onBlur adalah fungsi callback yang di panggil ketika ada perubahan di form ketika cursor keluar dari input

deklarasi Error

<ErrorMessage
                           errors={errors}
                           name={name}
                           render={({ message }) => <div className="text-danger pt-2">
                               <span >{message}</span>
                           </div>}
                       />

ErrorMessage adalah component untuk memproses error dari react-hook-form

name={name}
rules={rules}

name adalah name yang di berikan ke input
rules adalah rules validasi yang di berikan sehingga input dapat di kelola oleh react-hook-form

deklarasi input

<input type="checkbox" onChange={() => {
                            onChange(value ? !value :  true)
                        }} checked={value ||  false} />

fugnsi input sebenarnya yang di gunakan untuk melakukan input pada blok code ini yang perludigunakan hanya onChange yang dimana di gunakan oleh code untuk mengambil data yang di inputkan