<DataGrid> property "onCellEditCommit" doesn't work

Question

I'm using the DataGrid component of Material-UI for displaying a list of items.

I want to make each cell in every row editable and then change the corresponding item of that row.

for that purpose, I'm using the onCellEditCommit property provided on the DataGrid component. But, when I actually change a value of a cell, my event handler doesn't invoke.

I use the following code:

 export default function TargetsView(props) {
      const [items] = useContext(TargetsContext);
      const onItemsEnabled = props.onItemsEnabled;

      return (
        <div style={{ height: 300, width: "100%" }}>
          <DataGrid
            disableSelectionOnClick
            onCellEditCommit={(params) => {
              console.log("test");
            }}
            onSelectionModelChange={
              onItemsEnabled
                ? (selectedRows) => {
                    const targetInformation = [];
                    for (let selectedRow of selectedRows)
                      targetInformation.push(items[selectedRow - 1]);
                      onItemsEnabled(targetInformation);
                  }
                : null
            }
            rows={items}
            columns={columns}
            checkboxSelection
            experimentalFeatures={{ newEditingApi: true }}
          />
        </div>
      );
    }

Answer 1

OnCellEditCommit is part of the legacy editing api: https://mui.com/x/react-data-grid/editing-legacy/#events

Your code should not contain the line: experimentalFeatures={{ newEditingApi: true}}

 export default function TargetsView(props) {
      const [items] = useContext(TargetsContext);
      const onItemsEnabled = props.onItemsEnabled;

      return (
        <div style={{ height: 300, width: "100%" }}>
          <DataGrid
            disableSelectionOnClick
            onCellEditCommit={(params) => {
              console.log("test");
            }}
            onSelectionModelChange={
              onItemsEnabled
                ? (selectedRows) => {
                    const targetInformation = [];
                    for (let selectedRow of selectedRows)
                      targetInformation.push(items[selectedRow - 1]);
                      onItemsEnabled(targetInformation);
                  }
                : null
            }
            rows={items}
            columns={columns}
            checkboxSelection
          />
        </div>
      );
    }