I want to post from a react app to an expressjs api - node.js

Question

I am learning react and expressjs for fun. I have a REST api in express and I have all the get methods working with my react app. Meaning I can call and use the get or get/i and it works. I am trying to do the post method now and I think im missing some small parts. I know this code is messy but its just a sandbox
Here is my express post method. It does post and write to mongo hard coded now I am trying to send it a request from react and use those values. the console.log all say undefined in the log.
request [object Object]
tony params [object Object]
Tony Name undefined
Tony Path /api/courses
//const tony = validateCourse(req.body);
const tony = req;
console.log("request " + tony);
console.log("tony params " + tony.params);
console.log("Tony Name " + tony.name);
console.log("Tony Path " + tony.path);
// this posts with hard coded values need to get values from the react post now
MongoClient.connect('mongodb://localhost:27017', function (err, client) {
if (err) throw err;
var db = client.db('tc-fant-maps');
db.collection('mapss').insertOne({name: 'Map020', description: 'This is the map of test', path:'http://d9amq8b4jzm6k.cloudfront.net/elrue001.png'}, function (findErr, result) {
if (findErr) throw findErr;
//console.log(result);
client.close();
res.send(result);
});
});
Here is my react code that does hit the api as the hard coded values actually show up in mongo. Meaning it hits my post and my hardcoded method executes. I just dont see the new values im passing in the console.log
function CreateMap() {
const [name, setName] = useState('')
const [description, setDescription] = useState('')
const [path, setPath] = useState('')
const submit = e => {
e.preventDefault()
fetch(`http://localhost:3001/api/courses`, {
method: 'POST',
body: JSON.stringify({ name, description, path }),
})
console.log("tony yimt")
}
return (
<form onSubmit={submit}>
<label htmlFor="name">Map Name</label>
<input
name="name"
value={name}
onChange={e => setName(e.target.value)}
/>
<br />
<label htmlFor="description">EMap Description</label>
<input
type="description"
name="description"
value={description}
onChange={e => setDescription(e.target.value)}
/>
<br />
<label htmlFor="path">Map Image Path</label>
<input
type="path"
name="path"
value={path}
onChange={e => setPath(e.target.value)}
/>
<br />
<button type="submit">Send it!</button>
</form>
)
}
export default CreateMap ```
When I look at the post in chrome I see
request payload
{"name":"fran","description":"k","path":"foj"}
which is what I entered on my web form (just typed in junk) and I get a status 200 back.
I either do not know how to get the body from the request and use it in express or I am sending the payload wrong from react.
sorry for the mess as I said its a sandbox but it does send a payload.
so short story is im trying to replace the hard coded
({name: 'Map020', description: 'This is the map of test', path:'http://d9amq8b4jzm6k.cloudfront.net/elrue001.png'}
with the values in my react form post

Answer 1

if you don't have the body parser package, you should get it and add it to your app
var app = express();
app.use(bodyparser.json());
Then you can get the json body
npm install body-parser

Answer 2

Your fetch call, and api need to be modified a bit. Your fetch should look more like this:
fetch(`http://localhost:3001/api/courses`, {
method: 'POST',
body: JSON.stringify({ name: name,
description: description,
path: path }),
})
Notice that I added the property names, then set their values.
And your api needs to access the body object of the request:
const tony = req;
console.log("request " + tony);
console.log("tony params " + tony.body.params);
console.log("Tony Name " + tony.body.name);
console.log("Tony Path " + tony.body.path);
Notice the body property being accessed within the request object.

Answer 3

So it turned out to be a 'cors' issue. I had no cors set on the react app and my limited experience with it just assumed everything running on local host was ok and the error was not clear to me.
app.use(cors({
origin: 'http://localhost:3002'
}));
Once I added this to express side and enabled cors on react it worked.
That is 6 hours of my life I wont get back but good to have worked through it.