0

Buen día, estoy desarrollando una app en React Native. Actualmente trabajo en el lado web, con React y me he aventurado a probar en el mundo de las app.

Bien, hasta ahora he usado el conditional rendering por ejemplo, para validar formularios, y que los errores salgan si es que los hubiera.

Pues bien, parece ser que ahora con Native no es así, o no se puede hacer como en el navegador.

Tengo un input con su respectivo error:

<TextInput style={[inputs.inputPrimary, { borderColor: formErrors.name && formErrors.name.length > 0 ? 'red' : uiColors.gray}]} 
 value={form.name} 
 placeholder={'Nombre'} 
 onChangeText={(text)=> handleChange(text, 'name')}/>

 {formErrors.name && formErrors.name.map((error, i) => <Text style={inputs.error} key={i}>{error}</Text>)}

El error que me sale, me dice que no puedo imprimir formErrors.name fuera de una etiqueta Text, cuando yo lo único que quiero es ver si existe esa propiedad (si por ejemplo la relleno y hago submit de form, valida otros campos y me dice que no puede hacer map de undefined.

¿Como puedo realizar conditional rendering en react native?

1 respuesta 1

1

Dentro de tu componente tienes que declarar un state

const [errors, setErrors] = useState([]);

En tu metodo handleChange tienes que agregar los errores al state en el array errors

setErrors([...errors, "Nuevo error aqui"])

Hacer metodo para que devuelva los errores existentes:

const mostrarErrores = this.state.errors.map((error, i) => (
    <Text style={inputs.error} key={i}>{error}</Text>)}
));

En el render haremos un rendereo condicional:

<View style={styles.container}>
    { this.state.errors.length > 0 ? mostrarErrores : '' } 
</View>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.