Trouble with React Form POST request - reactjs

Question

I am having difficulty understanding what I'm doing wrong on this POST request. The POST request itself is working which I confirmed in the network tab.
However, I am only able to post static values that I define, rather than the values from the form fields. Please have a look. This is driving me up the wall. Thank you!
Notes:
In TestForm.js it doesn't actually seem to console.log the response as I'm asking it to.
I receive no errors.
This does POST to my server, and into Postgres, and I will show below what that looks like when I console.log.
console.log(sauces) at the start of HandleSubmit does in fact show "sauces" currectly, which is whatever is input into the first form field.
GitHub Repository
The React Form Component (TestForm.js):
function TestForm() {
const [sauce, setSauce] = useState('');
const [presentation, setPresentation] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
fetch('http://jyh:3000', {
method: 'POST',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({
"test_name": sauce,
"test_sauce": presentation,
}),
}).then((res) => {
console.log(res.json());
return res.json();
}).catch((err) => {
console.log(err.message);
});
};
return (
<form onSubmit={handleSubmit}>
<div className="color-section" id="reviewASauce">
<div className="container-fluid">
<h2>Review a Sauce</h2><br />
Trying a sauce that is already in our database? Review it!
<br />
<br />
<br />
<h2>Sauce Name</h2>
<Form.Label htmlFor="test_name">
</Form.Label>
<Form.Control
type="text"
id="test_name"
aria-describedby="test_name"
placeholder="Input the name of the sauce here."
value={sauce}
onChange={(e) => setSauce(e.target.value)}
/>
<Form.Text id="test_name" muted>
</Form.Text>
<br />
<br />
<Form.Label htmlFor="test_sauce">
</Form.Label>
<Form.Control
type="text"
id="test_sauce"
aria-describedby="test_sauce"
placeholder="Input the name of the sauce here."
value={presentation}
onChange={(e) => setPresentation(e.target.value)}
/>
<Form.Text id="test_sauce" muted>
</Form.Text>
<br />
<br />
<Button variant="dark" type="submit">
Submit
</Button>
</div>
</div>
</form>
);
}
export default TestForm;
Server index.js:
app.post('/', async (req, res) => {
await TestTable.create({
test_name: "test_name",
test_sauce: "test_sauce",
}).then((data) => {
console.log(data.toJSON());
}).catch((err) => {
console.log(err);
});
});
What the terminal displays when clicking submit:
{
id: 100,
test_name: 'test_name',
test_sauce: 'test_sauce',
updatedAt: 2022-12-21T02:54:42.447Z,
createdAt: 2022-12-21T02:54:42.447Z
}
I have tried to change and arrange both the HandleSubmit function as well as my app.post, but no matter what I do I cannot seem to get the form data from TestForm.js to index.js.

Answer 1

In your Server index.js you are not using the params you sent from the frontend.
It looks you are using express for you server.
Try doing something like
await TestTable.create({
test_name: req.body.test_name,
test_sauce: req.body.test_sauce
})
Check this: How to access the request body when POSTing using Node.js and Express?