I am trying to post some data from a table to a form to edit it. When I access the form throught the edit button it correctly routes to the form with an id however I get the following error: TypeError: Cannot destructure property 'CmpnyCode' of 'company' as it is undefined.
The following is my code:
editcompany.js:
import axios from "axios";
import React, { useState, useEffect } from "react";
import { useParams /*useHistory*/ } from "react-router-dom";
const initialValues = {
CmpnyCode: "",
CmpnyName: "",
Address1: "",
Address2: "",
PoBox: "",
City: "",
Province: "",
Country: "",
Phone: "",
Fax: "",
Email: "",
RegistrationNo: "",
VatNo: "",
PinNo: "",
BranchNo: "",
BranchHq: "",
StartDate: "",
EndDate: "",
Current: "",
RunDate: "",
DateCreated: "",
UserID: "",
LocationID: "",
};
const CompanyMaster_Edit = () => {
const [company, setCompany] = useState(initialValues);
const {
CmpnyCode,
CmpnyName,
Address1,
Address2,
PoBox,
City,
Province,
Country,
Phone,
Fax,
Email,
RegistrationNo,
VatNo,
PinNo,
BranchNo,
BranchHq,
StartDate,
EndDate,
Current,
RunDate,
DateCreated,
UserID,
LocationID,
} = company;
const CompanyCode = useParams();
useEffect(() => {
loadData();
});
const loadData = () => {
const response = axios.get(
`http://localhost:8000/getcomcode/${CompanyCode}`
);
setCompany(response.data);
};
const onValueChange = (e) => {
setCompany({ ...company, [e.target.CompanyCode]: e.target.value });
};
const editData = () => {
axios.put(`http://localhost:8000/upcompanymst/${CmpnyCode}`);
//history.push("/companymst");
};
return (
<div className="App">
<div className="auth-wrapper">
<div className="auth-inner">
<form>
<h3> Edit Company Master</h3>
<div className="form-class8">
<div className="form-group">
<label>Company Code</label>
<input
type="text"
className="form-control"
placeholder="CompanyCode"
onChange={(e) => onValueChange(e)}
name="CmpnyCode"
value={CmpnyCode}
/>
</div>
<div className="form-group">
<label>Company Name</label>
<input
type="text"
className="form-control"
placeholder="CompanyName"
onChange={(e) => onValueChange(e)}
name="CmpnyName"
value={CmpnyName}
/>
</div>
<div className="form-group">
<label>Address1</label>
<input
type="text"
className="form-control"
placeholder="Address1"
onChange={(e) => onValueChange(e)}
name="Address1"
value={Address1}
/>
</div>
<div className="form-group">
<label>Address2</label>
<input
type="text"
className="form-control"
placeholder="Address2"
onChange={(e) => onValueChange(e)}
name="Address2"
value={Address2}
/>
</div>
<div className="form-group">
<label>PO Box</label>
<input
type="text"
className="form-control"
placeholder="PO Box"
onChange={(e) => onValueChange(e)}
name="PoBox"
value={PoBox}
/>
</div>
<div className="form-group">
<label>City</label>
<input
type="text"
className="form-control"
placeholder="City"
onChange={(e) => onValueChange(e)}
name="City"
value={City}
/>
</div>
<div className="form-group">
<label>Province</label>
<input
type="text"
className="form-control"
placeholder="Province"
onChange={(e) => onValueChange(e)}
name="Province"
value={Province}
/>
</div>
<div className="form-group">
<label>Country</label>
<input
type="text"
className="form-control"
placeholder="Country"
onChange={(e) => onValueChange(e)}
name="Country"
value={Country}
/>
</div>
</div>
<div className="form-class8">
<div className="form-group">
<label>Phone</label>
<input
type="text"
className="form-control"
placeholder="Phone"
onChange={(e) => onValueChange(e)}
name="Phone"
value={Phone}
/>
</div>
<div className="form-group">
<label>Fax</label>
<input
type="text"
className="form-control"
placeholder="Fax"
onChange={(e) => onValueChange(e)}
name="Fax"
value={Fax}
/>
</div>
<div className="form-group">
<label>Email</label>
<input
type="email"
className="form-control"
placeholder="Email"
onChange={(e) => onValueChange(e)}
name="Email"
value={Email}
/>
</div>
<div className="form-group">
<label>Registration No</label>
<input
type="text"
className="form-control"
placeholder="RegistrationNo"
onChange={(e) => onValueChange(e)}
name="RegistrationNo"
value={RegistrationNo}
/>
</div>
<div className="form-group">
<label>VAT No</label>
<input
type="text"
className="form-control"
placeholder="VAT No"
onChange={(e) => onValueChange(e)}
name="VatNo"
value={VatNo}
/>
</div>
<div className="form-group">
<label>Pin No</label>
<input
type="text"
className="form-control"
placeholder="Pin No"
onChange={(e) => onValueChange(e)}
name="PinNo"
value={PinNo}
/>
</div>
<div className="form-group">
<label>Branch No</label>
<input
type="text"
className="form-control"
placeholder="Branch No"
onChange={(e) => onValueChange(e)}
name="BranchNo"
value={BranchNo}
/>
</div>
<div className="form-group">
<label>Branch Hq</label>
<input
type="text"
className="form-control"
placeholder="Branch Hq"
onChange={(e) => onValueChange(e)}
name="BranchHq"
value={BranchHq}
/>
</div>
</div>
<div className="form-class8">
<div className="form-group">
<label>Start Date</label>
<input
type="text"
className="form-control"
placeholder="Start Date"
onChange={(e) => onValueChange(e)}
name="StartDate"
value={StartDate}
/>
</div>
<div className="form-group">
<label>End Date</label>
<input
type="text"
className="form-control"
placeholder="End Date"
onChange={(e) => onValueChange(e)}
name="EndDate"
value={EndDate}
/>
</div>
<div className="form-group">
<label>Current</label>
<input
type="text"
className="form-control"
placeholder="Current"
onChange={(e) => onValueChange(e)}
name="Current"
value={Current}
/>
</div>
<div className="form-group">
<label>Run Date</label>
<input
type="text"
className="form-control"
placeholder="Run Date"
onChange={(e) => onValueChange(e)}
name="RunDate"
value={RunDate}
/>
</div>
<div className="form-group">
<label>Date Created</label>
<input
type="text"
className="form-control"
placeholder="Date Created"
onChange={(e) => onValueChange(e)}
name="DateCreated"
value={DateCreated}
/>
</div>
<div className="form-group">
<label>User ID</label>
<input
type="text"
className="form-control"
placeholder="User ID"
onChange={(e) => onValueChange(e)}
name="UserID"
value={UserID}
/>
</div>
<div className="form-group">
<label>Location ID</label>
<input
type="text"
className="form-control"
placeholder="Location ID"
onChange={(e) => onValueChange(e)}
name="LocationID"
value={LocationID}
/>
</div>
</div>
<button
className="btn btn-primary btn-block"
onClick={() => editData()}
>
Edit
</button>
</form>
</div>
</div>
</div>
);
};
export default CompanyMaster_Edit;
Index.js in the server side:
app.get("getcomcode/:CmpnyCode", (req, res) => {
const CompanyCode = req.params.CmpnyCode;
db.query(
"SELECT FROM companymst WHERE CmpnyCode = ?",
CompanyCode,
(err, result) => {
if (err) console.log(err);
}
);
});
Please help me out here to figure what I may have done wrong.
Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Comments
Post a Comment