For ag-grid, is it possible to access old rowData? - reactjs

Question

I am creating some custom inline editing functionality and am trying to reset the data when the user hit cancel after making edits to specific columns. I'm using cellRenderers for this so I don't have access to the editing params that a cellEditor would.
Currently, what I am doing is saving the specific row's data in React state originalRowInfo when that row is clicked:
const moreInfoClick = (event, toggleMoreInfo, rowData) => {
event.persist();
setMoreInfoLocation({ x: event.clientX, y: event.clientY });
setRowInfo(rowData);
setOriginalRowInfo({ ...rowData });
toggleMoreInfo(true);
};
I am getting rowData via params.data when I click on a row
The reason I can't just use the rowInfo state is because that gets changed by ag-grid whenever I make an edit to the column. But using {...rowData} seems to fix that.
My only issue now is one of my column values is an array with objects inside and when I edit that column, it gets changed inside originalRowInfo as well. I would imagine this has something to do with object referencing.
The column looks something like this:
[
{position: 1, heat_num: 100},
{position: 2, heat_num: 200}
]
And what actually gets edited is the heat_num
The only thing I can think of is to refetch the data from DB on Cancel but I would rather not have to do that.

Answer 1

You don't need originalRowInfo to reset to the original state if the user cancels the editing, but you may rather do the opposite: save the new value inputValue as temporary state when the user editing and:
If the user submit the result: call ICellRendererParams.setValue(inputValue) to commit the result.
Otherwise, if the user abort: simply discard the result by resetting inputValue to ICellRendererParams.value which is the original value.
function EditableCellRenderer(params: ICellRendererParams) {
const [editable, setEditable] = React.useState(false);
const [originalData] = React.useState(params.value);
const [inputValue, setInputValue] = React.useState(params.value);
const inputRef = React.useRef(null);
const onEdit = () => {
setEditable(true);
setTimeout(() => {
inputRef.current?.focus();
});
};
const onCancel = () => {
setInputValue(originalData);
setEditable(false);
};
const onSubmit = () => {
params.setValue(inputValue);
setEditable(false);
};
return (
<>
<input
ref={inputRef}
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
disabled={!editable}
/>
<button onClick={onEdit}>E</button>
<button onClick={onCancel}>X</button>
<button onClick={onSubmit}>S</button>
</>
);
}
Live Demo