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;