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

[Duda] Helpertext

Buenas noches En el ultimo paso de hace la validación no sale el helperText que corresponde Adjunto mi codigo

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

function FormSignUp ({handleSubmit}){ const [name, setName]=useState("") const [lastname, setLastname]=useState("") const [email, setEmail]=useState("") const [prom, setProm]=useState(true) const [nov, setNov]=useState(false)

const [errors, setErrors]=useState({
    name:{
        error:false,
        message:"Mínimo 3 caracteres",
    },
})

function validarNombre(nombre){
    if (nombre.length >= 3){
        return{
            name:{
                error:false,
                message:""
            }
        }
    }else{
        return{
            name:{
                error:true,
                message:"Mínimo 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.errors
            ? errors.name.message
            :""
        }
        onBlur={(e)=>{
            setErrors(
                validarNombre(e.target.value)
            )
        }}        
    ></TextField>
    <TextField 
        id="lastname" 
        label="Apellido" 
        variant="outlined" 
        fullWidth 
        margin="normal"
        value={lastname}
        onChange={(e)=>{
            setLastname(e.target.value);
        }}
    ></TextField>
    <TextField 
        id="email" 
        label="Correo electronico" 
        variant="outlined" 
        fullWidth 
        margin="normal" 
        value={email}
        onChange={(e)=>{
            setEmail(e.target.value);
        }}
    ></TextField>
    <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'>Registro</Button>
</form>

} export default FormSignUp

3 respuestas

Hola Anngie, espero que estés bien! ¡Que increible! Felicitaciones por la creatividad! Gracias por compartir tu código con nosotros. Le recomendamos que comparta su código con sus colegas en Discord, allí es posible que todos lo vean e interactúen contigo. Si tiene alguna pregunta sobre el contenido del curso, estamos aquí para ayudarlo. ¡Sigue practicando! ¡Vamos juntos! :)

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

hola Rafael, mi duda es por que el helperText, no se me visibiliza en el input si no cumple con la condicion al ingresar el input

solución!

Hola Anngie, no te funciona el helperText porque tienes una "s" de más:

helperText={
            errors.name.errors //  debe ser: errors.name.error
            ? errors.name.message
            :""
        }

y te quedaría:

helperText={errors.name.error ? errors.name.message : ""}