I used on onChange event to take input values and display on the screen. But While doing so I encountered a problem that when I am cancelling the changes its not getting cancelled instead it stores the onChange values. I want to keep the original values when cancelling the event.

onChange event

row.edit_mode 
   ?<input type="text" placeholder="Enter data" value={value} onChange={(event) => 
     onTableValueChanged(event, tableIndex, rowIndex, valueIndex)} className="form-control" />
   :<span className="truncate table-truncate ext-data-pr-tooltip" data-pr-tooltip="value">{value} 
     </span>

Fetch details from redix store

const extraction_data = useSelector(state => state.attachment.extraction.output_json);

state used

const [tableEntities, setTableEntities] = React.useState(extraction_data[currentPage - 1].table);

on Cancel event

const cancelTableRow = (row, tableIndex, rowIndex) => {
    let table_entities_cp = [...tableEntities];
    console.log(table_entities_cp);
    let table_entity_cp = table_entities_cp[tableIndex];
    table_entity_cp.rows[rowIndex].edit_mode = false;
    table_entities_cp[tableIndex] = table_entity_cp;
    setTableEntities(table_entities_cp);
  }

onChange Method

const onTableValueChanged = (event, tableIndex, rowIndex, valueIndex) => {
      const updatedTableEntities = [...tableEntities];
      updatedTableEntities[tableIndex].rows[rowIndex].data[valueIndex] = event.target.value;
      setTableEntities(updatedTableEntities);
  }