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

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: [email protected]">
                    
                    <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: [email protected]">
                    
                    <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: [email protected]">
                    
                    <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>

    </>
  )
}

3. 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>