Solucionado (ver solución)
Solucionado
(ver solución)
3
respuestas

Reto para validar campos adicionales

Hola! Estoy intentando realizar el reto de validar otros campos y comencé por el "Apellido". Intenté hacerlo siguiendo los pasos usados para validar el campo "Nombre" pero al renderizar la aplicación surge un error al tratar de leer el método error, que se repite en cualquiera de los campos, aunque al correr el código individualmente para cada campo el validador funciona.

Podrían ayudarme a entener el error en mi código?

Captura de pantalla del error al ejecutar el código

import { useState } from 'react';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Switch from '@mui/material/Switch';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';

function FormSignUp ({ handleSubmit }) {
    const [name, setName] = useState('')
    const [lastName, setLastName] = useState('')
    const [email, setEmail] = useState('')
    const [prom, setProm] = useState(true)
    const [nov, setNov] = useState(true)
    const [errors, setErrors] = useState({
        name: {
            error: false,
            message: "Deben ser al menos 3 caracteres",
        },
        lastName: {
            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" } }
        }
    }

    function validarApellido(apellido) {
        if(apellido.length >= 3){
            return { lastName: { error: false, message: '' } }
        } else {
            return { lastName: { error: true, message: "Deben ser al menos 3 caracteres" } }
        }
    }

    return (
        <form onSubmit={(e) => {
            e.preventDefault()
            handleSubmit({name, lastName, email, prom, nov})
        }}>
            <TextField
                id="name"
                label="Nombre"
                variant="outlined"
                fullWidth
                margin='normal'
                value={ name }
                onChange={(e) => setName (e.target.value)}
                error={ errors.name.error }
                helperText={ errors.name.error ? errors.name.message : '' }
                onBlur={(e) => {
                    setErrors(validarNombre(e.target.value))
                }}
            />
            <TextField
                id="lastName"
                label="Apellido"
                variant="outlined"
                fullWidth
                margin='normal'
                value={ lastName }
                onChange={(e) => setLastName (e.target.value)}
                error={ errors.lastName.error }
                helperText={ errors.lastName.error ? errors.lastName.message : '' }
                onBlur={(e) => {
                    setErrors(validarApellido(e.target.value))
                }}
            />
            <TextField
                id="email"
                label="Correo electrónico"
                variant="outlined"
                fullWidth
                margin='normal'
                value={ email }
                onChange={(e) => setEmail (e.target.value)}
            />
            <FormGroup>
                <FormControlLabel control={
                    <Switch
                    checked={ prom }
                    onChange={(e) => setProm (e.target.checked)}
                    /> }
                    label="Promociones"
                />
                <FormControlLabel control={
                    <Switch
                    checked={ nov }
                    onChange={(e) => setNov (e.target.checked)}
                    /> }
                    label="Novedades"
                />
            </FormGroup>
            <Button variant="contained" type="submit">Registrarse</Button>
        </form>
    )
}

export default FormSignUp
3 respuestas
solución!

¡Hola Ezequiel!

El error que estás experimentando se debe a que estás sobrescribiendo todo el objeto de estado de errores en lugar de actualizar solo el campo correspondiente. Para solucionarlo, debes actualizar la función validarApellido para que devuelva un objeto con los errores actualizados en lugar de sobrescribir todo el objeto de estado de errores.

Aquí te dejo la función actualizada:

function validarApellido(apellido) {
    if(apellido.length >= 3){
        return { ...errors, lastName: { error: false, message: '' } }
    } else {
        return { ...errors, lastName: { error: true, message: "Deben ser al menos 3 caracteres" } }
    }
}

Lo que estamos haciendo aquí es utilizar el operador de propagación (...) para copiar todo el objeto de estado de errores y luego actualizar solo el campo lastName con el nuevo estado de error.

Espero que esto te ayude a solucionar el problema. ¡Buena suerte! ¡Espero haber ayudado y buenos estudios!

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

Gracias por la explicación Rafaela!

Es posible que también sea necesario usar el operador de propagación (...) en la función validarNombre o estoy conservando un error anterior en mi código?

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

Con esta corrección el código se ejecuta correctamente.

Desde ya agradezco la aclaración!

Tenía el mismo problema y con esto ha quedado resuelto, muchas gracias Rafaela y Ezequiel. Aunque creo que debería incluirse en el curso, porque Harland menciona en el video: 02 Mostrando errores en Material UI que const [errors, setErrors] es un objeto para todos los errores que haya en el formulario, y apenas toca el tema del operador de propagación en éste y otros cursos