1

Cuando quiero utilizar los inputs del form para setear algo me sale undefined con lo que estoy seteando

Alguien sabe que podria hacer para que no tener este error, porque lo que quiero hacer es mandar un post y no me funciona por el undefined este ya pobre varias cosas y nada asi que si alguien me ayuda se lo agradeceria

const Activity = () => { 

    const [datos, setDatos] = useState({
        name: 'fra',
        pais :[ 'Uruguay'],
        duration : 4,
        season : 'verano'
    })

    const handleInputChange = (event) => {   
        setDatos({
            ...datos,
            [event.target.name] : event.target.value,
            [event.target.pais] : event.target.value,
            [event.target.duration]: event.target.value,
            [event.target.season] : event.target.value
        })
        console.log(datos)
    }

    const enviarDatos =  async(event) => {
        event.preventDefault()
        datos.duration = parseInt(datos.duration)
        console.log(datos)
            const response = await axios ({
                url : "http://localhost:3001/activity",
                method : 'POST',
                data : datos
            })
            return response
    }

    return (
        <Fragment>
            <h1>Formulario</h1>
            <form  onSubmit={enviarDatos}>
                <div >
                    <input type="text" placeholder="Nombre" onChange={handleInputChange} name="name"></input>
                </div>
                <div >
                    <input type="number" placeholder="Duracion" onChange={handleInputChange} name="duration"></input>
                </div>

                <select name="season" value='verano' onChange={handleInputChange}>
                    <option value="verano">Verano</option>
                    <option value="primavera">Primavera</option>
                    <option value='otoño'>Otoño</option>
                    <option value="invierno">Invierno</option>
                </select>
                {/* <select name="pais"  onChange={handleInputChange}>
                    {countriesGlobalState.map( (e) => {
                        return <option value={[e.name]}> {e.name}</option>
                    })}
                </select> */}
                <button type="submit" >Enviar</button>
            </form>
            <ul>
                <li>{datos.name}</li>
            
            </ul>
        </Fragment>
    );
}

export default Activity;

1 respuesta 1

0

Basándome en este artículo How to handle multiple inputs in React, veo que hay una mejor forma de capturar los datos de los inputs y selects.

Además, esa manera de hacerlo también es promovida por la documentación oficial de React.

Y sería esta:

const handleInputChange = (event) => {
  const { name, value } = event.target;
  setDatos({
    ...datos,
    [name]: value
  });
  console.log(datos);
};

Básicamente obtenemos del event.target el value y el name solo una vez y luego seteamos ese dato en el estado.

Intenté integrar esa solución a tu código y aparentemente ya no aparece más el undefined:

import React from "react";
import "./styles.css";

export default function App() {
  const [datos, setDatos] = React.useState({
    name: "fra",
    pais: ["Uruguay"],
    duration: 4,
    season: "verano"
  });

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setDatos({
      ...datos,
      [name]: value
    });
    console.log(datos);
  };

  const enviarDatos = async (event) => {
    event.preventDefault();
    datos.duration = parseInt(datos.duration);
    console.log(datos);
    const response = await axios({
      url: "http://localhost:3001/activity",
      method: "POST",
      data: datos
    });
    return response;
  };

  return (
    <div>
      <h1>Formulario</h1>
      <form onSubmit={enviarDatos}>
        <div>
          <input
            type="text"
            placeholder="Nombre"
            onChange={handleInputChange}
            name="name"
          ></input>
        </div>
        <div>
          <input
            type="number"
            placeholder="Duracion"
            onChange={handleInputChange}
            name="duration"
          ></input>
        </div>

        <select name="season" value="verano" onChange={handleInputChange}>
          <option value="verano">Verano</option>
          <option value="primavera">Primavera</option>
          <option value="otoño">Otoño</option>
          <option value="invierno">Invierno</option>
        </select>
        {/* <select name="pais"  onChange={handleInputChange}>
                {countriesGlobalState.map( (e) => {
                    return <option value={[e.name]}> {e.name}</option>
                })}
            </select> */}
        <button type="submit">Enviar</button>
      </form>
      <ul>
        <li>{datos.name}</li>
      </ul>
    </div>
  );
}

Edit new

Prueba los resultados en Codesandbox para ver si es esta la solución que necesitabas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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