I’m not getting the full data sent to the server via axios

I want to send a student data to the backend server via axios.post, but im not getting the full object in my server route

Here’s the ‘student’ object:

{
    "sisn": "202401",
    "level": "K1",
    "registration_date": "2024-11-01T05:56:27.705Z",
    "custodian": "Mother",
    "personal": {
        "firstname": "Jack",
        "middlename": "Sparrow",
        "lastname": "James",
        "lrn": "333333331111",
        "gender": "Male",
        "email": "[email protected]",
        "birthdate": "2020-11-01",
        "height": "4'8"",
        "blood_type": "B",
        "food_allergen": "None",
        "cell": "0915-881-5474",
        "weight": "43",
        "fortitude": "Normal",
        "siblings": 1,
        "photo_filename": "daniella.jpg",
        "photo": {}
    },
    "parents": {
        "mother": {
            "firstname": "Sssss",
            "middlename": "Sdfsdfsd",
            "lastname": "Assss",
            "address_line1": "Lot 1, Blk 2 Guyabano St., Brgy 178",
            "address_line2": "Camarin Caloocan City",
            "email": "[email protected]",
            "occupation": "housewife",
            "cell": "0945-555-5555",
            "marital_status": "Married",
            "photo_filename": "daniella.jpg",
            "photo": {}
        }
    }
}

The ‘save’ button in my app that has an OnClick handler

const AddStudent = async (e) => {
await axios.post('http://localhost:4000/api/students/add', student,
{ headers: { "Content-Type": "multipart/form-data",}
}).then(result => {
SetIsStudentCreationShown(false)
SetIsStudentSummaryShown(true)
}).catch(error => {
console.log('something went wrong')
})
}

The route handler (some i deleted intentionally, im using multer )

    router.post('/add', (req,res,next) => {
      upload(req, res, async (err) => { 
       console.log(req.body)

      more code...
     }
   }

the console.log(req.body) shows some but now all the data in my object

    [Object: null prototype] {
      sisn: '202401',
      level: 'K1',
      registration_date: '2024-11-01T05:18:53.625Z',
      custodian: 'Mother',
      personal: [Object: null prototype] {
      firstname: 'Rowel',
      middlename: 'Gomez',
      lastname: 'Sss',
      lrn: '333333331111',
      gender: 'Male',
      email: '[email protected]',
      birthdate: '2020-11-01',
      height: `4'8"`,
      blood_type: 'B',
      food_allergen: 'None',
      cell: '0915-881-5474',
      weight: '43',
      fortitude: 'Normal',
      siblings: '1',
      photo_filename: 'daniella.jpg'
    }
  }

For some reason there is no parent field in the object. The weird thing is if I change the entry order of the field, parents first and then personal, the personal field in the object is nowhere to be found.

I need to have access to the whole student object inside my student route.
What should I do.

Here’s the Onchange handler of my form that set the student State:

const HandleChangeFormInputs =(e) => {
e.stopPropagation();
let inputName = e.target.name; 
if (inputName.search('student')!==-1) {
    if (inputName.search('height')!==-1) { //5'9" or 5'10"
        var heightState, height;
        //allows empty value
        if (!e.target.value) heightState = e.target.value; 
        //removes all the formating
        height = e.target.value.replace(/[^d]/g,''); 
        //allows values that has only feet number, no inches
        if (height.length === 1) heightState = height; 
        //accepts feet number and single digit inches  
        if (height.length === 2) heightState = `${height.slice(0,1)}'${height.slice(1,2)}"`;
        if (height.length === 3) heightState = `${height.slice(0,1)}'${height.slice(1,3)}"`;
        SetStudent({...student,personal:{...student.personal,height:heightState}}); 
    }
    // works for all input with mobile numbers 0915 881-5767    
    else if (inputName.search('cell') !==-1) { 
        let unmaskednumber, maskednumber; 
        //not really masked, since value is empty, only just for the code below
        if (!e.target.value) maskednumber = e.target.value; 
        else {
            //removes all the formating 
            unmaskednumber = e.target.value.replace(/[^d]/g,''); 
            if (unmaskednumber.length <5) maskednumber = `${unmaskednumber.slice(0,e.target.value.length)}`; 
            else if (unmaskednumber.length < 8) maskednumber = `${unmaskednumber.slice(0,4)}-${unmaskednumber.slice(4,7)}`;
            else if (unmaskednumber.length < 12) maskednumber = `${unmaskednumber.slice(0,4)}-${unmaskednumber.slice(4,7)}-${unmaskednumber.slice(7,11)}`;
        }
        SetStudent({...student,personal:{...student.personal,cell:maskednumber}});
    }
    else {
        var name = inputName.slice(8);
        SetStudent({...student,personal:{...student.personal,[name]:e.target.value}});
    }
}
else if (inputName.search('mother')!==-1) {
    if (inputName.search('cell') !==-1) { 
        let unmaskednumber, maskednumber; 
        //not really masked, since value is empty, only just for the code below
        if (!e.target.value) maskednumber = e.target.value; 
        else {
            unmaskednumber = e.target.value.replace(/[^d]/g,''); //removes all the formating
            if (unmaskednumber.length <5) maskednumber = `${unmaskednumber.slice(0,e.target.value.length)}`; 
            else if (unmaskednumber.length < 8) maskednumber = `${unmaskednumber.slice(0,4)}-${unmaskednumber.slice(4,7)}`;
            else if (unmaskednumber.length < 12) maskednumber = `${unmaskednumber.slice(0,4)}-${unmaskednumber.slice(4,7)}-${unmaskednumber.slice(7,11)}`;
        }
        SetStudent({...student,parents:{...student.parents,mother:{...student.parents.mother,cell:maskednumber}}});
    }
    else {
        var name = inputName.slice(7);
        SetStudent({...student,parents:{...student.parents,mother:{...student.parents.mother,[name]:e.target.value}}});
    }

}
else if (inputName.search('father')!==-1) {

}
else {
SetStudent({...student,[inputName]:e.target.value});
}

} //end of HandleChangeFormInputs