How to set defaultValue with Controller combined with axios to get the default value

[galih56]

I have a custom input component built with ui-kitten react-native.

Custom input component

export const TextInput=React.forwardRef(({onChange,onChangeText, errorText, description, inputRef, ...props },ref) => {
  return (
    <View >
      <Input  onChange={onChange} onChangeText={onChangeText} {...props} ref={inputRef}/>
      {description && !errorText ? ( <Text >{description}</Text>) : null}
      {errorText ? <Text >{errorText}</Text> : null}
    </View>
  )
})

To use this component i wrap it with Controller

 <Controller  
                rules={{ required: {value:true,message:"Nama lengkap harus diisi" }}}
                name="data_pemohon.name"
                control={control}
                defaultValue={defaultData?.name}
                render={({ field: { onChange, onBlur, value, ref },fieldState : { error } }) =>  <TextInput inputRef={ref} errorText={error?.message??null} label='Name  : ' name="name"  style={styles.input}   onBlur={onBlur} onChangeText={onChange} defaultValue={defaultData?.name} value={value??defaultData?.name??''} />}
            />

The default value is shown as expected. but the value is not recognize. When i click a button that run handleSubmit, the value is still empty and required rule fired. I tried to forwardRef but doesn't do anything. passing the ref from props also do nothing. passing the default value to defaultValue props of the controller or TextInput doesn't work either. Do i miss something?

LOG errors : {"message": "Name is required, "ref": {"focus": [Function focus], "reportValidity": [Function reportValidity], "setCustomValidity": [Function setCustomValidity]}, "type": "required"}

[Moshyfawn]

I can't tell for sure having only plain text code in front of me.

Please, take a look at this Snack and, if possible, tweak the example to better match your use-case. I couldn't reproduce the issue

[galih56]

When i pass a hardcoded value like "john doe" just like in the snack you show, the value i pass to controller is registered. But when i pass a state/props from parent component to defaultValue props in the Controller component. It only displays the value. But under the hood, the input value is still empty (the controller still firerequired rules) and i have to type something so the value can be registered.

[galih56]

I found the problem is i have to get the value with axios first. I believe the value is not rendered because default value only shows the props when the component on mounted for the first time. So when the component is loaded. The default value state is not ready yet. because controller input has to wait the axios first. when the axios success, controller won't show anything.

Any tips to handle this?

[Moshyfawn]

For async defaultValues, make sure to use the reset form method

useEffect(() => {
  reset(data)
}, [reset, data])

RHF collects defaultValues on the first render when useForm is first called (initialized). It triggers the second render to reflect the field level values set on inputs (defaultValue, defaultChecked) and Controllers.

When you get your async values (via a request or whatever promise, via axios etc.), the input has already been initialized with the defaultValue set at the field level. It's not even a RHF behavior, but the way inputs work.

[galih56]

Thank you so much. I use reset and i had to work around to get it to work well with my dynamic input form