I am trying to allow MUI TextFields to be editable after populating them from an API.
The TextFields are successfully populating.
I have tried using an onChange method which allowed only one extra character to be entered into the TextField before immediately being overwritten with the original data.
Here is my API call:
const params = useParams();
const [details, setDetails] = useState('');
const fetchDetails = async () => {
setDetails(
await fetch(`/fiscalyears/FY2023/intakes/${params.id}/details`)
.then((response) => response.json())
);
};
The Function:
function IntakeDetails() {
const params = useParams();
const [details, setDetails] = useState('');
const fetchDetails = async () => {
setDetails(
await fetch(`/fiscalyears/FY2023/intakes/${params.id}/details`).then(
(response) => response.json()
)
);
};
useEffect(() => {
fetchDetails();
}, []);
return (
<Container maxWidth="xl">
<Box>
<h3> Intake Details </h3>
</Box>
<Box className="details-form">
{details['fields']?.map((row) => (
<TextField
className="text-field"
value={row['Value'] || ''}
onChange={(e) => {
setDetails((prev) => {
return { ...prev, row: e.target.value };
});
}}
variant="outlined"
margin="normal"
label={row['FieldName']}
/>
))}
</Box>
</Container>
);
}
The JSON response from the API looks like this:
{
"Id": 1,
"IntakeID": 1234,
"Title": "title",
"Status": "Cancelled",
"TaxonomyID": null,
"ModifiedBy": "Doe, Jane",
"UpdateDate": "Jan 9 2020 12:00AM",
"questions": "google.com",
"actions": "google.com",
"sizing": "google.com",
"fields": [
{
"FieldId": 2,
"FieldName": "Type",
"FieldType": "Select",
"Value": "Sandbox",
"Choices": [
"Option1",
"Option2",
"Option3",
"Option4",
"Option5"
]
},
{
"FieldId": 3,
"FieldName": "Class",
"FieldType": "Select",
"Value": "Run",
"Choices": [
"Option1",
"Option2",
"Option3",
"Option4",
"Option5",
"Option6",
"Option7"
]
}
}