Primereact Datatable: Data undefined on editorCallback when focusing multiple InputTexts

Question

I am using Datatable from Primereact and followed the documentation on implementing Cell Editing.

const textEditor = (options: any) => {
  return (
    <InputText
      className="text-xs w-full"
      value={options.value}
      onChange={(e) => {
        console.log(options);
        options.editorCallback(e.target.value);
      }}
    />
  );
};

Inside the InputText component's onChange function, options.editorCallback(e.target.value) is causing an error saying that "Cannot read properties of undefined (reading 'data')"

Upon inspection using the browser devtool, there is a value inside data in editorCallback() function when I edit the InputText the first time.

var editorCallback = function editorCallback(val) {
  var editingRowData = _objectSpread$7({}, editingRowDataState);

  editingRowData[field] = val;
  setEditingRowDataState(editingRowData);

  props.editingMeta[editingKey].data[field] = val;
};

But when I change focus multiple times and then edit an InputText, the data becomes undefined hence causing the issue.

Here is a screenshot of the callback with value.

Here is a screenshot of the callback with no values

Does anyone know the problem and how to fix it? Thank you

Answer 1

I was having the same issue when adding a new row to the table and then programmatically adding that row's id to the DataTable editingRows property. Then when I would try to pick an option from a DropDown, some editing states had not been initialized and this error would be trown.

For some reason this only happens in the production build or when you comment out the <React.StrictMode> lines in the index.jsx file, which means that only happens when strict mode is disabled. I guess the extra renders caused by <React.StrictMode> are masking the issue.

What worked for me was to add a new row without adding it to the editingRows object. And force the user to click the pencil icon to edit it. This will initialize some needed states in the DataTable and prevent that error from happening.

I also added some logic to pick some options using the onRowEditInit event so that the row does not initialize with the empty DropDown inputs.

I recommend you open an issue in the PrimeReact repository, if you have not yet.