can't edit data in Textfield in reactjs - reactjs

Question

I'm trying to edit the api data on a Mui datagrid. I want a modal form to pop on clicking the edit icon. Everything works fine, I'm getting the data to be edited and all that. thing is the data I'm getting in textfield for edit, is not changing the value. it's not taking any inputs I'm giving, it stays the same. what should I do to make the textfields editable ? Thanks in advance.
export default function ContactsCard(props) {
const [ContactData, setContactData] = useState([]);
const [open, setOpen] = useState(false);
const [formInputData, setformInputData] = useState(
{
name: '',
details: '',
}
);
const handleChange = (evnt) => {
const newInput = (data) => ({
...data,
[evnt.target.name]: evnt.target.value
});
setformInputData(newInput);
}
const showData = () => {
axios.get('http://localhost:8006/api/v2/get/beneficiaries-list').then(function (res) {
try {
var result = res.data;
// console.log(result.data)
setContactData(result.data)
}
catch (error) {
console.log(error)
}
})
}
const handleSubmit = (evnt) => {
evnt.preventDefault();
const formData = new FormData(); //formdata object
formData.append('nickname', formInputData.name); //append the values with key, value pair
formData.append('target', formInputData.details);
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
axios.post('http://localhost:8006/api/v2/save/beneficiary', formData, config)
.then(response => {
if (response.data.success === true) {
showData()
alert(response.data.message)
}
})
.catch(error => {
alert(error.message);
});
setformInputData({ name: "", details: "" });
setOpen(false);
}
const handleEdit = (id) => {
var edit_id = id.row.id
console.log(edit_id)
setOpen(true)
setformInputData(ContactData.find((data) => data.id === edit_id))
setOpen(true)
}
const handleOpen = () => setOpen(true)
const handleClose = () => setOpen(false);
useEffect(() => {
showData();
}, [])
const handleDelete = (id) => {
var del_id = id.row.id
console.log(del_id)
axios.post('http://localhost:8006/api/v2/remove/beneficiary/', { id: del_id }).then(res => {
console.log(res.data)
if (res.data.success === true) {
alert(res.data.message)
showData();
console.log('ajh');
}
})
};
const columns = [
{ field: 'name', headerName: 'Nick Name', width: '130' },
{ field: 'details', headerName: 'Deposit address', width: '130' },
{
field: 'actions',
type: 'actions',
width: '130',
headerName: 'Actions',
cellClassName: 'actions',
renderCell: (id) => {
return (
<>
<IconButton color="primary" onClick={(e) => { handleEdit(id) }}>
<EditIcon />
</IconButton>
<IconButton color="error" onClick={(e) => {
handleDelete(id)
}}>
<DeleteIcon />
</IconButton>
</>
);
},
},
];
return (
<Card {...props}>
<CardContent>
<ContactDataGrid rows={ContactData} columns={columns} />
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={open}>
<FormControl sx={style} mt={1} >
<Typography sx={{ fontSize: 16, fontWeight: 'bold' }} color="text.secondary" gutterBottom>
Edit Contact
</Typography>
<Stack flexDirection='column' gap={1.5} mt={1}>
<TextField autoFocus required
id="filled-hidden-label-small"
label="Nick Name" variant="outlined" size="small"
onChange={handleChange}
value={formInputData.name}
name="Nick Name"
className="form-control"
/>
<TextField required
id="filled-hidden-label-small"
label="Deposit Address" variant="outlined" size="small"
onChange={handleChange}
value={formInputData.details}
name="Amount"
className="form-control"
/>
</Stack>
<Stack flexDirection='row' justifyContent={'center'} gap={1.5} mt={1}>
<Button
variant="contained"
type="submit" color="error"
onClick={handleClose}
sx={{ alignSelf: 'center' }} >Cancel</Button>
<Button
variant="contained"
type="submit"
onClick={handleSubmit}
sx={{ alignSelf: 'center', backgroundColor: '#000073' }} >Submit</Button>
</Stack>
</FormControl>
</Fade>
</Modal>
</CardContent>
</Card>
);
}

Answer 1

Your handleChange function is updating the new value in event.target.name but, the name doesn't match with the value. You can try changing the name to match the value getter:
<TextField autoFocus required
id="filled-hidden-label-small"
label="Nick Name" variant="outlined" size="small"
onChange={handleChange}
value={formInputData.name}
name="name" // this changed
className="form-control"
/>
<TextField required
id="filled-hidden-label-small"
label="Deposit Address" variant="outlined" size="small"
onChange={handleChange}
value={formInputData.details}
name="details" // this changed
className="form-control"
/>