Front

import React from 'react'
import { useState } from 'react'
import Sidebar from './sidebar/Sidebar'
import Axios from 'axios'
import './gui.css'
const sideBar3Dark = {
height : '100vh',
width : '82.5vw',
backgroundColor : '#161818',
marginLeft: '17.5vw'
}
function HomeGui() {
const [newAboutUs, setVal] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
/*
Axios.get('http://localhost:4000/api/get/aboutUs').then(res => {
console.log(res);
})
*/
Axios.post('http://localhost:4000/api/post', { Id: newAboutUs }).then(res => console.log(res)).catch(err => console.log(err));
  }
return (
<div className='homeGui'>
<form onSubmit={ handleSubmit }>
<input type="text" value = {newAboutUs} onChange={(e) => {setVal(e.target.value)}}/>
<button></button>
</form>
</div>
  )
}
function Gui() {
const [contentStyle, setContentStyle] = useState(sideBar3Dark)
return (
<>
<div className='gui'>
<Sidebar changeStyle={(size) => {setContentStyle(size)}} />
<div className='mainGui' style={ contentStyle }>
<HomeGui/>
</div>
</div>
</>
  )
}
export default Gui

Backend

const express = require('express');
const app = express();
const bodyParser = require("body-parser");
const cors = require('cors');
const fs = require('fs');
app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.get("/api/get/aboutUs", (req, res) => {
fs.readFile('../client/src/data/aboutUs.json', 'utf-8', (err, jsonString) => {
if (err) {
console.log(err);
} else {
try {
const data = JSON.parse(jsonString);
console.log(data);
res.send(data);
} catch(err) {
console.log(err);
}
}
});
});
app.post("/api/post", (req, res) => {
console.log(req.body.Id);
});
app.listen(4000, () => {
console.log('PORT 4000 connected');
});
Essentially at when I perform console.log(req.body.Id) in app.post(...), it just says undefined in my console, but I do not know why.