0

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.

2
  • Si no le pones el return, la ejecución continua a continuación del if( ) y se ejecutará guardarError( false );
    – Juanjo
    el 15 mar. 2021 a las 19:31
  • Muchas gracias! Tiene sentido, duda resuelta! :D
    – Aprendiz
    el 15 mar. 2021 a las 19:34

1 respuesta 1

2

El return lo que está haciendo es retornar de la función, por lo que todo lo que siga no se va a ejecutar.

Por el contrario, cuando lo dejas sin el return, si la condición del if es verdadera se ejecutará guardarError(true), e inmediatamente se ejecuta guardarError(false).

Otra forma de hacerlo funcionar es usando un else asociado al if que ya tienes.

2
  • Muchas Gracias por la rápida respuesta, duda resuelta ;)
    – Aprendiz
    el 15 mar. 2021 a las 19:39
  • @Aprendiz, si consideras que la respuesta fue de utilidad, no olvides aceptarla para que otros usuarios de la comunidad puedan tomarla como referencia, saludos.
    – g.4
    el 15 mar. 2021 a las 20:21

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.