Unable to get the document to load on my website made using ReactJS

Question

So I am creating an employee registration form and I am trying to attach documents on the webpage, which need to be acknowledged before going to the next step. The problem I am facing is the document is failing to load on the webpage, and also that my webpage throws me this error

Error

Here is the code for my webpage, FYI I am just calling this page in App.js

    import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import { Document, Page } from 'react-pdf';
import 'react-datepicker/dist/react-datepicker.css';

function EmployeeRegistration() {
  const [userData, setUserData] = useState({
    fullName: '',
    gender: '',
    aadhaarNumber: '',
    dateofBirth: null,
    maritalStatus: '',
    emergencyContactName: '',
    address: '',
    phoneNumber: '',
    emailID: '',
    emergencyContactNumber: '',
    jobTitle: '',
    departmentName: '',
    joiningDate: '',
    employmentType: '',
    education: [],
    workExperience: [],
    relevantSkills: '',
    pfUAN:'',
    esiNO:'',
    documentAcknowledged: false,
  });

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setUserData({ ...userData, [name]: value });
  };

  const handleAddEducation = () => {
    setUserData({
      ...userData,
      education: [...userData.education, { degree: '', graduationYear: '', grade: '' }],
    });
  };

  const handleRemoveEducation = (index) => {
    const updatedEducation = [...userData.education];
    updatedEducation.splice(index, 1);
    setUserData({ ...userData, education: updatedEducation });
  };

  const handleEducationChange = (index, event) => {
    const { name, value } = event.target;
    const updatedEducation = [...userData.education];
    updatedEducation[index][name] = value;
    setUserData({ ...userData, education: updatedEducation });
  };
  
  const handleAddWorkExperience = () => {
    setUserData({
      ...userData,
      workExperience: [...userData.workExperience, { companyName: '', designation: '', duration: '' }],
    });
  };

  const handleRemoveWorkExperience = (index) => {
    const updatedWorkExperience = [...userData.workExperience];
    updatedWorkExperience.splice(index, 1);
    setUserData({ ...userData, workExperience: updatedWorkExperience });
  };

  //omitted parts which weren't necessary on here
        <h2>Social Security Numbers</h2>
        <label>
          PF UAN number:
          <input
            type="number"
            name="pfUAN"
            value={userData.bdpmName}
            onChange={handleInputChange}
          />
        </label>
        <br />
        <label>
          ESI Number:
          <input
            type="number"
            name="esiNO"
            value={userData.esiNO}
            onChange={handleInputChange}
          />
        </label>
        <br />
        <div>
          {/* Document display and acknowledgement */}
          <h3>Document</h3>
          <Document
            file="../Docs/test.pdf" // Specify the path to your PDF document
            onLoadSuccess={onDocumentLoadSuccess}
          >
            <Page pageNumber={pageNumber} />
          </Document>
          {!userData.documentAcknowledged && (
            <button type="button" onClick={handleDocumentAcknowledgement}>
              Acknowledge Document
            </button>
          )}
        </div>
        <button type="submit" class="btn btn-default btn-sm">Submit</button>
      </form>
    </div>
  );
}

export default EmployeeRegistration;

Answer 1

You ara making things too complex,its hard to find the typo error. You didn't need useState to get data from forms.

Instead, You can use native browse support new FormData API, This makes your code more readable and maintaninable.

For example, simple form element

function MyForm(){

    function submit(e){
        e.preventDefault();
        const form = new FormData(e.target); // Magic is here
        console.log(form.get('username'));
        /** Rest of API calls */
    }
    
    return(
        <form onSubmit={submit}>
            <label for='username'>
                Username:
            </label>
            <input id='username' name='username'></input>
            <button type='submit'>Submit</button>
        </form>
    )
}

No more useState , onChage event