Estoy practicando con React y para gestionar un estado en un formulario, que me dé error si dejo el campo en blanco, he creado la función handleSubmit:
const Form = () => {
// state del formulario
const [busqueda, guardarBusqueda] = useState({
pais: "",
});
const [error, guardarError] = useState(false);
// extraer pais
const { pais } = busqueda;
// función que coloca los elementos en el state
const handleChange = (e) => {
// actualizar el state
guardarBusqueda({
...busqueda,
[e.target.name]: e.target.value,
});
};
// Cuando el usuario da submit al form
const handleSubmit = (e) => {
e.preventDefault();
//validar
if (pais.trim() === "") {
guardarError(true);
return;
}
guardarError(false);
//pasarlo al componente principal
};
return (
<form onSubmit={handleSubmit}>
{error && <p>Tienes que escribir un país</p>}
<label htmlFor="pais">País:</label>
<input
type="text"
name="pais"
id="pais"
value={pais}
onChange={handleChange}
/>
<input type="submit" value="Buscar Capital" />
</form>
);
};
Mi duda es, por qué el if de la función handleSubmit no me funciona (no me cambia el estado si se cumple la condición) si lo dejo sin el return:
const handleSubmit = (e) => {
e.preventDefault();
//validar
if (pais.trim() === "") {
guardarError(true);
}
guardarError(false);
//pasarlo al componente principal
};
Por el contrario, si pongo el return como el primer ejemplo del código si me funciona. Seguramente sea algo obvio pero no tengo por costumbre poner return en los if. Gracias de antemano, un saludo.
return
, la ejecución continua a continuación delif( )
y se ejecutaráguardarError( false );