4
respuestas

[Duda] Validación apellido

Al hacer la validación de apeliido me manda que no puede leer la prop error porque esta undefined, estoy haciendo tal cual hice la validación de nombre, pero no entiendo porque ahi, me manda ese error.

Adjunto mi codigo para saber si hay algún error.

Saludos

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

import { useState } from "react"
import {Button, TextField, Switch, FormGroup, FormControlLabel} from "@mui/material"

function FormSignUp ({ handleSubmit }) {
    const [name, setName] = useState("");
    const [lastName, setLastName] = useState("");
    const [email, setEmail] = useState("");
    const [promo, setPromo] = useState(true);
    const [nov, setNov] = useState(false);

    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, promo, nov})
    }}>
        <TextField 
            id="name" 
            label="Nombre" 
            variant="outlined" 
            fullWidth
            margin="normal" 
            onChange={ (e) => { 
                setName(e.target.value);
            }}
            value={ name }
            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"
            onChange={(e) => {
                setLastName(e.target.value);
            }}
            value={ lastName }
            error={errors.lastName.error}
            helperText={
                errors.lastName.error 
                    ? errors.lastName.message 
                        : ""
            }
            onBlur={(e) => {
                setErrors(validarApellido(e.target.value))
            }} 
        />
        <TextField 
            id="email" 
            label="Correo Electronico" 
            variant="outlined" 
            fullWidth
            margin="normal" 
            value={email}
            onChange={(e) => {
                setEmail(e.target.value)
            }}/>
        <FormGroup>
            <FormControlLabel 
                control={
                    <Switch 
                        checked={ promo }
                        onChange={(e) => 
                            setPromo(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
4 respuestas

No es tanto con apellido, es mas bien con la cpnst error parece que no la definiste por lo que al intentar acceder se encuentra con un undifined, inteta declararla auqnue no estoy seguro si debas declararla como constante

Hola, no se si te refieras al arreglo de errors, o a la que marca el error, en el caso de la linea que marca el error error={errors.lastName.error} Es la propiedad de Material UI para darle color al ser un error, por eso es que no entiendo porque ahì me manda el error.

Saludos

Lo pudiste solucionar? A mi me pasa lo mismo

Hola, lo que a mi me funciono para ese problema fue crear una const para guardar el error de cada input .

Te adjunto lo que yo entendi de tu problema (espero se entienda, y si no hice mi mejor esfuerzo)

slds

const [errorsNombre, setErrorsNombre] = useState()
const [errorApellido, setErrorApellido] = useState())
const [errorCorreo, setErrorCorreo] = useState()

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad