mi consulta es, estoy enviando este formulario del front al backend pero llega vacio. no encuentro el error. Es un formulario para poder crear un nuevo personaje en la Api Debe ser una pavada pero al ser nuevo no lo puedo encontrar y estoy trabado con esto hace dias, por favor el que pueda responder algo claro ya que recien estoy empezando. desde ya, muchas gracias
const Formulario = () => {
function enviarFormulario (e){
e.preventDefault();
const data = new FormData(e.target)
const newPersonaje={
Nombre: data.get("Nombre"),
Historia: data.get("Historia"),
Imagen: data.get("Imagen"),
Genero: data.get("Genero"),
Estado: data.get("Estado"),
Ocupacion: data.get("Ocupacion"),
};
data.append("newPersonaje", JSON.stringify(newPersonaje))
console.log(newPersonaje);
fetch(`http://localhost:3000/api/personajes`,{
method:"POST",
headers:{
Accept: "application/json"
},
body: data,
})
.then(res=> console.log(res))
.catch(err => console.log(err));
}
return(
<div>
<form className='contenedor' method="POST" onSubmit={(e)=> enviarFormulario(e)}>
<label htmlFor="Nombre">Nombre</label>
<input type="text" id="Nombre" name="Nombre" />
<label htmlFor="Historia">Historia</label>
<input type="text" id="Historia" name="Historia" />
<label htmlFor="Imagen">Imagen</label>
<input type="text" id="Imagen" name="Imagen" />
<label htmlFor="Genero">Genero</label>
<input type="text" id="Genero" name="Genero" />
<label htmlFor="Estado">Estado</label>
<input type="text" id="Estado" name="Estado" />
<label htmlFor="Ocupacion">Ocupacion</label>
<input type="text" id="Ocupacion" name="Ocupacion" />
<button type="submit" value="ENVIAR REGISTRO"/>
</form>
</div>
)
}