I am trying to edit data in the Mui DataGrid cell and updating the data in the backend server as well on commit. But no way the prop is calling the "handleCellEditCommit" function. Here is the code,
const ODclientList = () => {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
const [odClientData, setData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const loadData = async () => {
try {
const response = await axios.get("http://localhost:5000/odclientlist");
setData(response.data);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
loadData();
}, []);
const handleCellEditCommit = async ({ clientID, field, value }) => {
console.log("This function is being called");
try {
await axios.put(`http://localhost:5000/updateodclientinfo/${clientID}`, {
[field]: value,
});
setData((prevData) =>
prevData.map((row) => (row.clientID === clientID ? { ...row, [field]: value } : row))
);
} catch (error) {
console.error(error);
}
};
const columns = [
{field:"clientID",headerName:"Client ID", editable: false},
{field:"buName",headerName:"BU Name", editable: true},
{field:"busZone",headerName:"Zone", editable: true},
{field:"phone",headerName:"Phone", editable: true},
{field:"cusName",headerName:"Client Name",editable: true},
]
return (
<Box m="20px">
<DataGrid
columns={columns}
rows={odClientData}
components={{ Toolbar: GridToolbar }}
getRowId={(row) => row.clientID}
editMode="cell"
onCellEditCommit={handleCellEditCommit}
/>
</Box>
);
};
export default ODclientList;
I also tried to console log some text on commit the edits, But that too is not happening.