Reactjs- Edit form not updating the database table

I am trying to create an edit form that will enable me update data in a table. When I click on the ‘edit’ button on my table it correctly redirects me to the edit form and data is also being correctly filled into the respective fields of the form, no issue there.

The only issue I am facing is that when I click on ‘edit’ on the form it does not update anything. I have used then same format for other forms and it works correctly but in this particular form I am having this issue.

Maybe there is something I may have done wrong and am unable to detect it so if you could help me see what I have done wrong that would be a real timesaver. I have looked at it for 2 days but am unable to see what I have done wrong.

editticket.js:

import axios from "axios";
import { React, useState, useEffect } from "react";
import { useHistory, withRouter } from "react-router-dom";

function TicketMaster_Edit(props) {
  const [CmpnyCode, setCmpnyCode] = useState("");
  const [DocNo, setDocNo] = useState("");
  const [DocDate, setDocDate] = useState("");
  const [DocType, setDocType] = useState("");
  const [AccCode, setAccCode] = useState("");
  const [AccName, setAccName] = useState("");
  const [OtherTradingName, setOtherTradingName] = useState("");
  const [MobileNo, setMobileNo] = useState("");
  const [Email, setEmail] = useState("");
  const [RequestType, setRequestType] = useState("");
  const [Description, setDescription] = useState("");
  const [ServiceCover, setServiceCover] = useState("");
  const [ContractDetail, setContractDetail] = useState("");
  const [BillingDetail, setBillingDetail] = useState("");
  const [OtherDetail, setOtherDetail] = useState("");
  const [AssignedTo, setAssignedTo] = useState("");
  const [VendorObservation, setVendorObservation] = useState("");
  const [Conclusion, setConclusion] = useState("");
  const [StatusType, setStatusType] = useState("");
  const [RegistrationDate, setRegistrationDate] = useState("");
  const [ClosingDate, setClosingDate] = useState("");
  const [RegisteredBy, setRegisteredBy] = useState("");
  const [ClosedBy, setClosedBy] = useState("");
  const [CustomerAttachmentLinks, setCustomerAttachmentLinks] = useState("");
  const [VendorAttachmentLinks, setVendorAttachmentLinks] = useState("");
  const [RecordChanged, setRecordChanged] = useState("");
  const [DateEntered, setDateEntered] = useState("");

  const history = useHistory();

  const argu = props.match.params.DocNo;

  useEffect(() => {
    axios.get("http://localhost:8000/getdocno/" + argu).then((response) => {
      setCmpnyCode(response.data[0].CmpnyCode);
      setDocNo(response.data[0].DocNo);
      setDocType(response.data[0].DocType);
      setDocDate(response.data[0].DocDate);
      setAccCode(response.data[0].AccCode);
      setAccName(response.data[0].AccName);
      setOtherTradingName(response.data[0].OtherTradingName);
      setMobileNo(response.data[0].MobileNo);
      setEmail(response.data[0].Email);
      setRequestType(response.data[0].RequestType);
      setDescription(response.data[0].Description);
      setServiceCover(response.data[0].SeviceCover);
      setContractDetail(response.data[0].ContractDetail);
      setBillingDetail(response.data[0].BillingDetail);
      setOtherDetail(response.data[0].OtherDetail);
      setAssignedTo(response.data[0].AssignedTo);
      setVendorObservation(response.data[0].VendorObservation);
      setConclusion(response.data[0].Conclusion);
      setStatusType(response.data[0].StatusType);
      setRegistrationDate(response.data[0].RegistrationDate);
      setClosingDate(response.data[0].ClosingDate);
      setRegisteredBy(response.data[0].RegisteredBy);
      setClosedBy(response.data[0].ClosedBy);
      setCustomerAttachmentLinks(response.data[0].CustomerAttachmentLinks);
      setVendorAttachmentLinks(response.data[0].VendorAttachmentLinks);
      setRecordChanged(response.data[0].RecordChanged.data[0]);
      setDateEntered(response.data[0].DateEntered);
      console.log(response.data);
    });
  }, [argu]);

  const editData = () => {
    axios.put("http://localhost:8000/upticketmst/" + argu, {
      CmpnyCode,
      DocNo,
      DocDate,
      DocType,
      AccCode,
      AccName,
      OtherTradingName,
      MobileNo,
      Email,
      RequestType,
      Description,
      ServiceCover,
      ContractDetail,
      BillingDetail,
      OtherDetail,
      AssignedTo,
      VendorObservation,
      Conclusion,
      StatusType,
      RegistrationDate,
      ClosingDate,
      RegisteredBy,
      ClosedBy,
      CustomerAttachmentLinks,
      VendorAttachmentLinks,
      RecordChanged,
      DateEntered,
    });
    history.push("/ticketmst");
  };

  return (
    <div className="App">
      <div className="auth-wrapper">
        <div className="auth-inner">
          <form onSubmit={() => editData()}>
            <h3>Ticket Master</h3>
            <div className="form-class8">
              <div className="form-group">
                <label>CmpnyCode</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="CmpnyCode"
                  value={CmpnyCode}
                  onChange={(e) => {
                    setCmpnyCode(e.target.value);
                  }}
                  name="CmpnyCode"
                />
              </div>

              <div className="form-group">
                <label>DocNo</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="DocNo"
                  value={DocNo}
                  onChange={(e) => {
                    setDocNo(e.target.value);
                  }}
                  name="DocNo"
                />
              </div>

              <div className="form-group">
                <label>DocDate</label>
                <input
                  type="date"
                  className="form-control"
                  placeholder="DocDate"
                  value={DocDate}
                  onChange={(e) => {
                    setDocDate(e.target.value);
                  }}
                  name="DocDate"
                />
              </div>

              <div className="form-group">
                <label>DocType</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="DocType"
                  value={DocType}
                  onChange={(e) => {
                    setDocType(e.target.value);
                  }}
                  name="DocType"
                />
              </div>

              <div className="form-group">
                <label>AccCode</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="AccCode"
                  value={AccCode}
                  onChange={(e) => {
                    setAccCode(e.target.value);
                  }}
                  name="AccCode"
                />
              </div>

              <div className="form-group">
                <label>AccName</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="AccName"
                  value={AccName}
                  onChange={(e) => {
                    setAccName(e.target.value);
                  }}
                  name="AccName"
                />
              </div>

              <div className="form-group">
                <label>OtherTradingName</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="OtherTradingName"
                  value={OtherTradingName}
                  onChange={(e) => {
                    setOtherTradingName(e.target.value);
                  }}
                  name="OtherTradingName"
                />
              </div>

              <div className="form-group">
                <label>MobileNo</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="MobileNo"
                  value={MobileNo}
                  onChange={(e) => {
                    setMobileNo(e.target.value);
                  }}
                  name="MobileNo"
                />
              </div>
            </div>

            <div className="form-class8">
              <div className="form-group">
                <label>Email</label>
                <input
                  type="email"
                  className="form-control"
                  placeholder="Email"
                  value={Email}
                  onChange={(e) => {
                    setEmail(e.target.value);
                  }}
                  name="Email"
                />
              </div>

              <div className="form-group">
                <label>RequestType</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="RequestType"
                  value={RequestType}
                  onChange={(e) => {
                    setRequestType(e.target.value);
                  }}
                  name="RequestType"
                />
              </div>

              <div className="form-group">
                <label>Description</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Description"
                  value={Description}
                  onChange={(e) => {
                    setDescription(e.target.value);
                  }}
                  name="Description"
                />
              </div>

              <div className="form-group">
                <label>ServiceCover</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="ServiceCover"
                  value={ServiceCover}
                  onChange={(e) => {
                    setServiceCover(e.target.value);
                  }}
                  name="ServiceCover"
                />
              </div>

              <div className="form-group">
                <label>ContractDetail</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="ContractDetail"
                  value={ContractDetail}
                  onChange={(e) => {
                    setContractDetail(e.target.value);
                  }}
                  name="ContractDetail"
                />
              </div>

              <div className="form-group">
                <label>BillingDetail</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="BillingDetail"
                  value={BillingDetail}
                  onChange={(e) => {
                    setBillingDetail(e.target.value);
                  }}
                  name="BillingDetail"
                />
              </div>

              <div className="form-group">
                <label>OtherDetail</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="OtherDetail"
                  value={OtherDetail}
                  onChange={(e) => {
                    setOtherDetail(e.target.value);
                  }}
                  name="OtherDetail"
                />
              </div>

              <div className="form-group">
                <label>AssignedTo</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="AssignedTo"
                  value={AssignedTo}
                  onChange={(e) => {
                    setAssignedTo(e.target.value);
                  }}
                  name="AssignedTo"
                />
              </div>
            </div>

            <div className="form-class8">
              <div className="form-group">
                <label>VendorObservation</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="VendorObservation"
                  value={VendorObservation}
                  onChange={(e) => {
                    setVendorObservation(e.target.value);
                  }}
                  name="VendorObservation"
                />
              </div>

              <div className="form-group">
                <label>Conclusion</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Conclusion"
                  value={Conclusion}
                  onChange={(e) => {
                    setConclusion(e.target.value);
                  }}
                  name="Conclusion"
                />
              </div>

              <div className="form-group">
                <label>StatusType</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="StatusType"
                  value={StatusType}
                  onChange={(e) => {
                    setStatusType(e.target.value);
                  }}
                  name="StatusType"
                />
              </div>

              <div className="form-group">
                <label>RegistrationDate</label>
                <input
                  type="date"
                  className="form-control"
                  placeholder="RegistrationDate"
                  value={RegistrationDate}
                  onChange={(e) => {
                    setRegistrationDate(e.target.value);
                  }}
                  name="RegistrationDate"
                />
              </div>

              <div className="form-group">
                <label>ClosingDate</label>
                <input
                  type="date"
                  className="form-control"
                  placeholder="ClosingDate"
                  value={ClosingDate}
                  onChange={(e) => {
                    setClosingDate(e.target.value);
                  }}
                  name="ClosingDate"
                />
              </div>

              <div className="form-group">
                <label>RegisteredBy</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="RegisteredBy"
                  value={RegisteredBy}
                  onChange={(e) => {
                    setRegisteredBy(e.target.value);
                  }}
                  name="RegisteredBy"
                />
              </div>

              <div className="form-group">
                <label>ClosedBy</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="ClosedBy"
                  value={ClosedBy}
                  onChange={(e) => {
                    setClosedBy(e.target.value);
                  }}
                  name="ClosedBy"
                />
              </div>

              <div className="form-group">
                <label>CustomerAttachmentLinks</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="CustomerAttachmentLinks"
                  value={CustomerAttachmentLinks}
                  onChange={(e) => {
                    setCustomerAttachmentLinks(e.target.value);
                  }}
                  name="CustomerAttachmentLinks"
                />
              </div>
            </div>

            <div className="form-class8">
              <div className="form-group">
                <label>VendorAttachmentLinks</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="VendorAttachmentLinks"
                  value={VendorAttachmentLinks}
                  onChange={(e) => {
                    setVendorAttachmentLinks(e.target.value);
                  }}
                  name="VendorAttachmentLinks"
                />
              </div>

              <div className="form-group">
                <label>RecordChanged</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="RecordChanged"
                  value={RecordChanged}
                  onChange={(e) => {
                    setRecordChanged(e.target.value);
                  }}
                  name="RecordChanged"
                />
              </div>

              <div className="form-group">
                <label>DateEntered</label>
                <input
                  type="date"
                  className="form-control"
                  placeholder="DateEntered"
                  value={DateEntered}
                  onChange={(e) => {
                    setDateEntered(e.target.value);
                  }}
                  name="DateEntered"
                />
              </div>
            </div>

            <button className="btn btn-primary btn-block">Edit</button>
          </form>
        </div>
      </div>
    </div>
  );
}

export default withRouter(TicketMaster_Edit);

backend code from index.js:

app.put("/upticketmst/:DocNo", (req, res) => {
  const DocuNo = req.params.DocNo;
  const CmpnyCode = req.body.CmpnyCode;
  const DocNo = req.body.DocNo;
  const DocDate = req.body.DocDate;
  const DocType = req.body.DocType;
  const AccCode = req.body.AccCode;
  const AccName = req.body.AccName;
  const OtherTradingName = req.body.OtherTradingName;
  const MobileNo = req.body.MobileNo;
  const Email = req.body.Email;
  const RequestType = req.body.RequestType;
  const Description = req.body.Description;
  const ServiceCover = req.body.ServiceCover;
  const ContractDetail = req.body.ContractDetail;
  const BillingDetail = req.body.BillingDetail;
  const OtherDetail = req.body.OtherDetail;
  const AssignedTo = req.body.AssignedTo;
  const VendorObservation = req.body.VendorObservation;
  const Conclusion = req.body.Conclusion;
  const StatusType = req.body.StatusType;
  const RegistrationDate = req.body.RegistrationDate;
  const ClosingDate = req.body.ClosingDate;
  const RegisteredBy = req.body.RegisteredBy;
  const ClosedBy = req.body.ClosedBy;
  const CustomerAttachmentLinks = req.body.CustomerAttachmentLinks;
  const VendorAttachmentLinks = req.body.VendorAttachmentLinks;
  const RecordChanged = req.body.RecordChanged;
  const DateEntered = req.body.DateEntered;

  db.query(
    "UPDATE ticketmst SET CmpnyCode=?, DocNo=?, DocDate=?, DocType=?, AccCode=?, AccName=?, OtherTradingName=?, MobileNo=?, Email=?,RequestType=?, Description=?, SeviceCover=?, ContractDetail=?, BillingDetail=?, OtherDetail=?, AssignedTo=?, VendorObservation=?, Conclusion=?, StatusType=?, RegistrationDate=?, ClosingDate=?, RegisteredBy=?, ClosedBy=?, CustomerAttachmentLinks=?, VendorAttachmentLinks=?, RecordChanged=?, DateEntered=? WHERE DocNo=?",
    [
      CmpnyCode,
      DocNo,
      DocDate,
      DocType,
      AccCode,
      AccName,
      OtherTradingName,
      MobileNo,
      Email,
      RequestType,
      Description,
      ServiceCover,
      ContractDetail,
      BillingDetail,
      OtherDetail,
      AssignedTo,
      VendorObservation,
      Conclusion,
      StatusType,
      RegistrationDate,
      ClosingDate,
      RegisteredBy,
      ClosingDate,
      RegisteredBy,
      ClosedBy,
      CustomerAttachmentLinks,
      VendorAttachmentLinks,
      RecordChanged,
      DateEntered,
      DocuNo,
    ],
    (err, result) => {
      if (err) {
        console.log(err);
      } else {
        res.send(result);
      }
    }
  );
});

Even if the mistake may be stupid or something please help me out as I have tried to see and scrutinized it hard but cannot figure out what I did wrong.

Answer

I realized that I had not allowed PUT request in my backend under cors: This is the edit:

app.use(
  cors({
    origin: ["http://localhost:3000"],
    methods: ["GET", "POST", "PUT", "DELETE"],
    credentials: true,
  })
);