TypeError: Cannot read properties of undefined (reading 'id') - React App - node.js

Question

I've trying to edit an entry of the data fetched from mysql and want to reflect if back in mysql db. For this im using post method of Axios. But im getting the following error when i try to edit the data and see for changes.
TypeError: Cannot read properties of undefined (reading 'id')
at C:\Users\Rahul01\Desktop\DBMS-PROJECT\BusTicketManagementSystem\server\index.js:123:23
at Layer.handle [as handle_request] (C:\Users\Rahul01\Desktop\DBMS-PROJECT\BusTicketManagementSystem\server\node_modules\express\lib\router\layer.js:95:5)
Here are the Codes
1.index.js
app.post('/admin/updatebus',(res,req)=>{
const id=req.body.id
const name=req.body.newbusname
const fromcity=req.body.newfromstation
const tocity=req.body.newtostation
const capacity=req.body.newcapacity+1
db.query("UPDATE bus SET busname=?,fromcity=?,tocity=?,capacity=? WHERE busid=? ",[name,fromcity,tocity,capacity,id+1],(err,result)=>{
if(err)
{
console.log(err);
res.send({op:f})
}
else
{
res.send({op:s});
}
})
})
2.Editbus.js
import Axios from 'axios'
import React, { useState } from 'react'
import { useParams } from 'react-router-dom'
export default function Editbus() {
const [newbusname, setnewbusname] = useState('')
const [newfromstation, setnewfromstation] = useState('')
const [newtostation, setnewtostation] = useState('')
const [newcapacity, setnewcapacity] = useState(0)
const {id}=useParams();
const handlesave=(e)=>{
// alert(key)
alert('Name'+newbusname+"\n From:"+newfromstation+"\nTo: "+newtostation+"\n Capacity: "+newcapacity)
Axios.post('http://localhost:3001/admin/updatebus',{
newbusname:newbusname,
newfromstation:newfromstation,
newtostation:newtostation,
newcapacity:newcapacity,
id:parseInt(id)
}).then((resp)=>{
if(resp.data.op==='s')
{
alert('Updated')
}
else
{
alert('Not Updated')
}
})
e.preventDefault()
}
return (
<>
<div class="container-contact100">
<div class="wrap-contact100">
<form class="contact100-form validate-form">
<span class="contact100-form-title">
Edit Bus {id}
</span>
<div class="wrap-input100 validate-input" data-validate="Name is required">
<input class="input100" type="text" name="name" onChange={e=>setnewbusname(e.target.value)} placeholder="New Bus Name" required/>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex#abc.xyz">
<input class="input100" type="text" name="email" onChange={e=>setnewfromstation(e.target.value)} placeholder="From Bus Stop" required/>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex#abc.xyz">
<input class="input100" type="text" name="email" onChange={e=>setnewtostation(e.target.value)} placeholder="To Bus Stop" required/>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex#abc.xyz">
<input class="input100" type="number" name="email" onChange={e=>setnewcapacity(e.target.value)} placeholder="New Capacity" required/>
<span class="focus-input100"></span>
</div>
<button onClick={handlesave}>Update</button>
</form>
</div>
</div>
<div id="dropDownSelect1"></div>
</>
)
}
In App.js
<Route exact path="/admin/editbus/:id" element={}>

Answer 1

It should be (req, res) instead of (res,req) in the .post handler.
Corrected Code:
app.post('/admin/updatebus',(req,res)=>{}
First Parameter should be for Request and second one for the Response.
Tip:
Include type='button' in the Submit Button so that the HTML form doesn't gets submitted.
<button type="button" onClick={handlesave}>Update</button>