[Duda] Validación y error | React: Function Components | Alura Latam

La verdad me gustaría que me explicaran y aclaren más a fondo sobre el código implementado en la clase de Harland

    const [errors, setErrors] = useState({
        name: {
            error: false,
            message: 'Deben ser al menos 3 caracteres',
        },
    })

    function validarNombre(nombre) {
        if(nombre.length >= 3){
            return {name: {error: false, message: '', },}
        }else{
            return {name: {error: true, message: 'Deben ser al menos 3 caracteres',},}
        }
    }

    // Código restante
<TextField id="name" label="Nombre" variant="outlined" fullWidth={true} margin="normal" onChange={(e) => { /*console.log(e.target.value);*/ setName(e.target.value); }} value={name} error={errors.name.error} helperText={errors.name.error ? errors.name.message : ''} onBlur={(e) => {setErrors(validarNombre(e.target.value))}} />

Cuando se le hace Blur veo que funciona la parte del error, pero no logro entender como es que funciona el código, también en las condicionales de la función validarNombre se retorna el objeto de usestate de errors seterrors, eso no es como reutilizar código? o es que en el usestate se le están valores por defecto?

¡Hola Edwin!

Permíteme explicarte en detalle.

El código que estás viendo utiliza el hook useState para crear un estado llamado "errors" que contiene un objeto con una propiedad "name". Esta propiedad tiene dos valores: "error" y "message". El valor de "error" se establece en falso inicialmente, lo que significa que no hay ningún error. El valor de "message" se establece en 'Deben ser al menos 3 caracteres'.

La función "validarNombre" se encarga de validar la longitud del nombre. Si el nombre tiene al menos 3 caracteres, la función devuelve un objeto con "error" establecido en falso y "message" establecido en una cadena vacía. Esto significa que no hay errores. Si el nombre tiene menos de 3 caracteres, la función devuelve un objeto con "error" establecido en verdadero y "message" establecido en 'Deben ser al menos 3 caracteres'. Esto significa que hay un error y se mostrará un mensaje de error.

En el código restante, se utiliza un componente TextField para mostrar un campo de entrada de texto. Se establece el valor del campo de entrada de texto en "name" y se pasa el valor de "errors.name.error" al prop "error" del componente TextField. Si "errors.name.error" es verdadero, se mostrará un mensaje de error utilizando el valor de "errors.name.message" en el prop "helperText" del componente TextField.

Cuando se produce el evento onBlur en el campo de entrada de texto, se llama a la función "validarNombre" pasando el valor del campo de entrada de texto. El resultado de la función se pasa a la función "setErrors" para actualizar el estado "errors". Esto significa que cada vez que el usuario sale del campo de entrada de texto, se realiza la validación y se actualiza el estado "errors" en consecuencia.

En resumen, el código implementado en la clase de Harland se encarga de validar la longitud del nombre y mostrar un mensaje de error si el nombre tiene menos de 3 caracteres. El estado "errors" se actualiza cada vez que el usuario sale del campo de entrada de texto.

Recomiendo esta lectura adicional:

Documentación de React, en el tópico de gestion de estados: https://es.react.dev/learn/managing-state

Espero que esto aclare tus dudas. Si tienes alguna otra pregunta, no dudes en preguntar. ¡Estoy aquí para ayudarte!

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!