Estoy trabajando en un formulario usando react-hook-form para React Native, que quiero enviar al servidor pero me quedo atascado cuando quiero borrar TextInput y actualizar el objeto como nulo, en lugar de que el objeto en sí sea no presente en el json.

Paso 1: tengo una entrada de texto que quiero borrar presionando un botón.

Paso 2: estoy haciendo esto pasando la referencia de la entrada al botón.

Entonces el objeto es - antes de borrar la entrada

 { input1: "some random text", object2: "random2", object3: "random3" }

Después de presionar el botón Borrar, la entrada de texto se borra, pero el objeto del formulario ahora es como:

 { object2: "random2", object3: "random3" }

Falta el objeto input1. Quiero que esté allí con su valor actualizado a nulo.

Código fuente para TextInput

 <View style={[AuthorizationStyle.authorizationTokenInput]}> <Controller control={control} render={({value}) => ( <TextInput placeholder="Bearer token (optional)" onChangeText={(itemValue) => setValue("bearerToken", itemValue == "" ? null : itemValue)} style={[AuthorizationStyle.textInput]} ref = {ref} /> )} name="bearerToken" defaultValue={null} /> </View>

Código fuente para borrar botón

 <View style={[AuthorizationStyle.deleteInput]}> <TouchableOpacity onPress = {() => ref.current.value = null}> <FontAwesomeIcon icon={faBackspace} size={22} color="#dc3545" style={[AuthorizationStyle.iconStyle]}/> </TouchableOpacity> </View>

Código fuente para useEffect -

 let ref = useRef(""); let val = ref.current.value; useEffect((val) => { if(val == "") { val = null } setValue("bearerToken", val) }, [val])

El código aún no está optimizado, lo siento por este código sin procesar, pero primero debe manejarlo con urgencia.