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