First post here so thanks in advance to any kind folk out there who can help me. I'm working on a CRUD app using PERN stack and I'm having an issue with an edit form which is supposed to inherit the data from the row selected in an organization table. The component code is as follows:
`import React, { useState, useContext, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { AppContext } from '../context/AppContext';
import AdminPortal from '../apis/AdminPortal'
const OrganizationUpdateForm = (props) => {
const {id} = useParams()
const [name, setName] = useState("");
const [shortName, setShortName] = useState("");
const [parentOrg, setParentOrg] = useState("");
const [website, setWebsite] = useState("");
const [comments, setComments] = useState("");
useEffect(() => {
async function fetchData () {
const response = await AdminPortal.get(organizations/${id});
console.log(response.data.data);
setName(response.data.data.organizations.name);
setShortName(response.data.data.organizations.short_name);
setParentOrg(response.data.data.organizations.parent_org);
setWebsite(response.data.data.organizations.website);
setComments(response.data.data.organizations.comments);
};
fetchData();
}, []);
let Navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
const updateOrganization = await AdminPortal.put(organizations/${id}, {
name,
short_name: shortName,
parent_org: parentOrg,
website,
comments
});
Navigate("/");
};
return (
Name
value={name}
onChange={(e) => setName(e.target.value)}
id="name"
className="form-control"
type="text"
/>
Short Name
value={shortName}
onChange={(e) => setShortName(e.target.value)}
id="short_name"
className="form-control"
type="text"
/>
Parent Organization
value={parentOrg}
onChange={(e) => setParentOrg(e.target.value)}
id="parent_org"
className="form-control"
type="text"
/>
Website
value={website}
onChange={(e) => setWebsite(e.target.value)}
id="website"
className="form-control"
type="text"
/>
Comments
value={comments}
onChange={(e) => setComments(e.target.value)}
id="name"
className="form-control"
type="text"
/>
{/* type="submit"
onClick={handleSubmit}
className="btn btn-primary"
>
Submit
*/}
</div>
)
}
export default OrganizationUpdateForm
`
I get the correct response when I hit the API from Postman and the browser creates the correct URL but I am getting the following error: "A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component." After extensive Googling I haven't been able to find a solution so I'm hoping someone here can take a quick look and be able to figure out what I am doing wrong. Thanks in advance.
Top comments (0)