React form POST to Express server not working - REST - reactjs

Question

I am trying to POST a HTML form to an Express server.
When I use a REST client, the POST request works fine and data is correctly sent and registered in DB. So server-side looks good. But my React code won't POST anything. There is no error in the console and input values are correctly targetted. I've tried native fetch method and also Axios, but both are not working. I hope someone will help me on that as I'm not very familiar with REST api's yet.
Here is my Form component :
import React, { useState } from "react";
import Header from "./Header";
import Footer from "./Footer";
const Form = () => {
{/* POST REQUEST */}
const handleFormSubmit = (event) => {
const name = event.target.elements.name.value;
const description = event.target.elements.description.value;
const email = event.target.elements.email.value;
const number = event.target.elements.number.value;
const website = event.target.elements.website.value;
const social_media1 = event.target.elements.social_media1.value;
fetch("http://192.168.1.101:7777/form", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: name,
description: description,
email: email,
number: number,
website: website,
social_media1: social_media1,
}),
})
.then((response) => {
console.log(response);
return response.json();
})
.catch((error) => console.log(error));
};
return (
<>
{/* SOME PAGE STUFF */}
<Header />
<div className="formTitle">
<h3>Create your artist page</h3>
<p>Some fields are required</p>
</div>
{/* HTML FORM */}
<form onSubmit={handleFormSubmit} className="form">
<div>
<legend>About you</legend>
{/* NAME */}
<label htmlFor="name">
Artist name <span className="required">required</span>
</label>
<input
type="text"
id="name"
name="name"
required
placeholder="Oasis"
/>
</div>
<div>
{/* DESCRIPTION */}
<label htmlFor="description">
Description <span className="required">required</span>
</label>
<textarea
rows="5"
type="text"
id="description"
name="description"
required
placeholder="Insert a short description here"
></textarea>
</div>
<div>
<legend>Contact</legend>
{/* EMAIL */}
<label htmlFor="email">
Email address <span className="required">required</span>
</label>
<input
type="email"
id="email"
name="email"
required
placeholder="contact#oasis.uk"
/>
{/* NUMBER */}
<label htmlFor="number">Phone number </label>
<input
type="text"
id="number"
name="number"
required
placeholder="[phone]"
/>
{/* WEBSITE */}
<label htmlFor="website">Website </label>
<input
type="text"
id="website"
name="website"
required
placeholder="https://oasis.com"
/>
</div>
<div>
<legend>Social media</legend>
{/* SOCIAL LINK 1 */}
<label htmlFor="social_media1">
Social media link 1 <span className="required">required</span>
</label>
<input
type="text"
id="social_media1"
name="social_media1"
required
placeholder="https://instagram.com/oasis"
/>
</div>
<button className="submit" type="submit">
Submit
</button>
</form>
<div className="temp"></div>
<Footer />
</>
);
};
export default Form;

Answer 1

You can try this method:
const form_Data = new FormData(event.target);
const finalData = {};
for (let [key, value] of form_Data.entries()) {
finalData[key] = value;
}
console.log(finaldata);
fetch("http://192.168.1.101:7777/form", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: finaldata
})
.then((response) => {
console.log(response);
return response.json({response);
})
.catch((error) => console.log(error));
};
First, you should convert all form data into new FormData and you can pass this object to you fetch's POST method
I think it should be work.