Axios post request of form data send nothing - reactjs

Question

I need to send form data to my database with an Axios post request, but nothing is sent.
The data I need is what is in movieId input.
Maybe the formData.append is not well written ?
const { register, handleSubmit } = useForm();
const onSubmit = data => {
const formData = new FormData();
formData.append('movieId', data.movieId);
axios.post("http://localhost:5000/addMovie", formData)
.then(response => {
console.log("Status: ", response.status);
console.log("Data: ", response.data);
}).catch(error => {
console.error('Something went wrong!', error);
});
}
return (
<div id="ModalBackground">
<div id="ModalContainer">
<button id= "closeModal" onClick= {() => {closeModal(false)}}>X</button>
<h1 id= "formTitle">Numéro du film</h1>
<form onSubmit={handleSubmit(onSubmit)} id="addMovieForm">
<input type="text" id="movieId" {...register("movieId")} required></input>
<input id= "submit" type="submit" value="Ajouter !"></input>
</form>
</div>
</div>
);
}
export default Modal```

Answer 1

Something is wrong there, i saw you have something specific for the handle submit, so you need to cast your call differently. Because when you do directly onSubmit={handleSubmit(onSubmit)} you are calling directly this method on every render/update
<form onSubmit={handleSubmit(onSubmit)} id="addMovieForm"
<form onSubmit={() => handleSubmit(onSubmit)} id="addMovieForm">
// if you wish to cast the event aswell
<form onSubmit={e => handleSubmit(e,onSubmit)} id="addMovieForm">

Answer 2

I use react hook form (https://react-hook-form.com/get-started), and the doc say that :
const { register, handleSubmit, watch, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);
console.log(watch("example")); // watch input value by passing the name of it
return (
/* "handleSubmit" will validate your inputs before invoking "onSubmit" */
<form onSubmit={handleSubmit(onSubmit)}>```
So I don't know what I have to do xD

Answer 3

Change onSubmit={handleSubmit(onSubmit)} to onSubmit={handleSubmit} as the former is supported in HTML but not in React.
<form onSubmit={handleSubmit} id="addMovieForm">
Add a name attribute to the input field so that the key value pair for this particular input field can be stored inside FormData. This eliminates the formData.append step inside handleSubmit().
<input type="text" id="movieId" name="movieId" required></input>
You need to specify Content-Type: multipart/form-data inside the header of the POST request.
const handleSubmit = (e) => {
e.preventDefault();
// Passing form element (e.target) populates the FormData object with the names and values of the fields inside it.
const formData = new FormData(e.target);
// formData.append("movieId", data.movieId);
// To check formData because simply console.log(formData) won't work
for (let item of formData) {
console.log(item);
}
axios
.post("http://localhost:5000/addMovie", formData, {
headers: { "Content-Type": "multipart/form-data" },
})
.then((response) => {
console.log("Status: ", response.status);
console.log("Data: ", response.data);
})
.catch((error) => {
console.error("Something went wrong!", error);
});
};