React hook form how to pass value from custom component to controller with already assign own on change?

user_18025800 0
Viewed 1495

I'm working on react-hook-form need you guys help. I have my own component call "Input" So Just want to register with but This Input component already assigned "Onclick" and "value" props so how to get Onchange and value to validate this input?

                          <Controller
                                    control={control}
                                    name="ProvinceInput"
                                    rules={{ required: true }}
                                    render={({ field: { onChange, onBlur, value, ref } }) => (
                                        <Input
                                            type="Province"
                                            onChange={setProvince}
                                            onSelect={onSelect}
                                            value={province}
                                            address={{
                                                province,
                                                amphoe,
                                                district,
                                                zipcode
                                            }}
                                        />
                                    )}
                                />
{errors.ProvinceInput && <span className='mt-2 text-sm text-red-400' >This field is required</span>}

I follow on React-hook-form Docs enter image description here As you can see The component work fine but can't validate "ProvinceInput" That register. please help me, Thanks

react-hook-form reactjs
1 Answers

You have to do this:

<Controller
  control={control}
  name="ProvinceInput"
  rules={{ required: true }}
  render={({ field: { onChange, onBlur, value, ref } }) => (
    <Input
      type="Province"
      onChange={e => {
        setProvince(e);
        onChange(e);
      }}
      onSelect={onSelect}
      value={province}
      address={{
        province,
        amphoe,
        district,
        zipcode,
      }}
    />
  )}
/>;
user_114321020
Related