issue: formState is not updating when the fields onChange

[galih56]

Version Number

^7.28.1

Codesandbox/Expo snack

https://snack.expo.dev/@galih56/react-hook-form-login-page

Steps to reproduce

Fill up the fields.
formState doesn't update. (I checked it with useEffect).
formState always returns {}.
Click the submit button, handleSubmit doesn't work.

Expected behaviour

formState values must be updated

What browsers are you seeing the problem on?

No response

Relevant log output

LOG  {}

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

please kindly send sometimes with the doc before posting an issue.

https://react-hook-form.com/api/useform/formstate

// errors is coming form formState,
const { register, handleSubmit, errors, getValues, setError,setValue,
  clearErrors, formState, reset, control } = useForm({
  defaultValues: {
    email: '[email protected]',
    password: 'secret'
  }
});

Follow the example in this section:
https://react-hook-form.com/get-started#ReactNative

 <Controller 
  name="email"
  rules={{ required: {value:true,message:"Email harus diisi" }}}
  control={control}
  render={props => <Input 
    label='Username/email : ' name="email" autoCapitalize="none" 
    error={!!email.error}
    errorText={email.error} style={styles.input}
    {...props} // you should not spread the entire props instead assign props according
  />}
/>

[galih56]

My bad, i should've done read the doc more.
At first i tried to spread the property fields. It also didn't work.
I thought i could just pass the onChange directly. I must pass the onChange to the onChangeText like this.

<Controller  
          name="password" 
          rules={{ required: "Password harus diisi" }} control={control}
          render={({ field: { onChange, onBlur, value } })=> 
          <Input accessoryRight={renderIcon}  secureTextEntry={secureTextEntry} 
                              label="Password" 
                              autoCapitalize="none" 
                              style={styles.input}
                              onBlur={onBlur}
                              onChangeText={onChange}
                              value={value}/>}/>

Thanks for the reply.

[bluebill1049]

nice, you work it out.

[galih56]

Sorry i bring this up again.
Same thing happened again lately, i have another inputs that uses react-hook-form to validate the values. But the formState is not updating and shows { }. The difference is i use useForm() along with useFormContext in a nested components. I use useFormContext because i have a component as a parent and another component as a child

related documentation : https://react-hook-form.com/api/useformcontext#main

The parent component look like this

export function SubmissionCreateForm({route, navigation}) {
  const form = useForm();
  const { formState,control, handleSubmit,getValues }=form;
  
  return (      
    <StackLayout navigation={navigation}  headerText={service?.name} headerTextStyle={{fontSize:30}} >
      <ContentContainer component={'view'} toggleContentExpand={expandContent} >
        <Text category={"h5"}>Form Permohonan</Text>
        <ScrollView style={{height:height}} showsVerticalScrollIndicator={false} onScroll={handleOnScroll}>
          <View style={{marginBottom: (height/2)}}>
            <FormProvider {...form}>
            {currentPage==0?<DataPemohonForm service={service}/>:null}
            {currentPage==1?<PengajuanForm fields={service.fields}/>:null}
            {currentPage==2?<BerkasForm files={service.files} />:null} 
            </FormProvider>
          </View>
        </ScrollView>

      </ContentContainer> 
    </StackLayout>
  );
}

Child Component

const DataPemohonForm=({containerStyle})=>{
    const {height }=useWindowDimensions();
    const { control,formState,register } = useFormContext(); 
    console.log('childFormState',formState)
    return(
        <View style={[containerStyle]}>
            <TextInput style={styles.input} label="Nama lengkap" {...register('tes', { value: "data" })}  onChange={register('tes', { value: "data" }).onChange} />
            <Controller  
                rules={{ required: {value:true,message:"Nama lengkap harus diisi" }}}
                name="name"
                control={control}
                render={({ field: { onChange, onBlur, value } }) =>  <TextInput  label='Nama lengkap : '  style={styles.input}   onBlur={onBlur} onChangeText={onChange} value={value}/>}
            />
            
            <Controller  
                rules={{ required: {value:true,message:"NIK harus diisi" }}}
                name="nik"
                control={control}
                render={({ field: { onChange, onBlur, value } }) => <TextInput style={styles.input} label="NIK"  onBlur={onBlur} onChangeText={onChange} value={value}/>}
            />
            <Controller  
                rules={{ required: {value:true,message:"Email harus diisi" }}}
                name="email"
                control={control}
                render={({ field: { onChange, onBlur, value } }) =>  <TextInput style={styles.input} label="Email" onBlur={onBlur} onChangeText={onChange} value={value}/>}
            />
            <Controller  
                rules={{ required: {value:true,message:"Email harus diisi" }}}
                name="no_hp"
                control={control}
                render={({ field: { onChange, onBlur, value } }) =><TextInput style={styles.input} label="No. HP"  onBlur={onBlur} onChangeText={onChange} value={value}/>}
            />
            <Controller  
                rules={{ required: {value:true,message:"Alamat harus diisi" }}}
                name="alamat"
                control={control}
                render={({ field: { onChange, onBlur, value } }) => <TextInput style={styles.input} label="Alamat"  multiline={true} numberOfLines={4}  onBlur={onBlur} onChangeText={onChange} value={value}/>}
            />
            
            <Controller  
                rules={{ required: {value:true,message:"Kecamatan harus diisi" }}}
                name="select-kecamatan"
                control={control} 
                render={({ field: { onChange, onBlur, value } }) => 
                    <Select label="Kecamatan : " placeholder="Pilih kecamatan"
                        items={[ 
                            {label:'Kecamatan Balikpapan Utara',value:1},
                            {label:'Kecamatan Balikpapan Timur',value:2},
                            {label:'Kecamatan Balikpapan Barat',value:3},
                            {label:'Kecamatan Balikpapan Selatan',value:4}
                        ]}
                        multiEnable={false}
                        textInputMode="outlined"
                        style={styles.input}
                        onChange={onChange} 
                    />}
                />
            <Controller  
                rules={{ required: {value:true,message:"Kelurahan harus diisi" }}}
                name="select-kelurahan"
                control={control} 
                render={({ field: { onChange, value } }) => 
                    <Select label="Kelurahan : "  placeholder="Pilih kelurahan"
                        style={styles.input}
                        items={[ 
                            {label:'Kelurahan Karang Rejo Utara',value:1},
                            {label:'Kelurahan Karang Rejo Timur',value:2},
                            {label:'Kelurahan Karang Rejo Barat',value:3},
                            {label:'Kelurahan Karang Rejo Selatan',value:4}
                        ]}
                        multiEnable={false}
                        textInputMode="outlined"
                        onChange={onChange} value={value}
                    />}
                />
             <Controller  
                rules={{ required: {value:true,message:"Tempat lahir harus diisi" }}}
                name="tempat_lahir"
                control={control} 
                render={({ field: { onChange, onBlur, value } }) =>  <TextInput style={styles.input} label="Tempat lahir" onBlur={onBlur} onChangeText={onChange} value={value}  /> }
            />
            
            <Controller  
                rules={{ required: {value:true,message:"Tanggal lahir harus diisi" }}}
                name="tanggal_lahir"
                control={control} 
                render={({ field: { onChange, value } }) => ( 
                    <Datepicker label='Tanggal lahir' placeholder='Tanggal lahir'
                        style={styles.input}
                        onChange={(date) => onChange(date)}
                        selected={value}/>
                )}
            />
        </View>
    )
}

export default DataPemohonForm;

I already aware with the previous issue on this one. But i still got the same bug.
I also pass the form object to provider.
I tried to console.log the control object from useForm(). The controller could catch the values. But the formState won't

[Moshyfawn]

From what I can understand from the plain text code you've posted, I see the same issue: you need to subscribe to whatever formState you need (formState.error in your case) before you can watch the values update

const {
  // INFO: destruct the form state you need
  formState: { error }
} = useFormContext()

// INFO: or you can do it this way
const { error } = formState

[Moshyfawn]

BTW, do you really need to use form's context to watch the errors? Using Controller, you can get the field's state like this

<Controller
  control={control}
  name="fieldName"
  render={({ fieldState: { error } }) => (
    <input />
  )}
/>