I have a problem that I am stumped on. I have a React project using ag-grid to present checkbook transactions. Every row in the grid has an Edit and a Delete button. On the page, there is also a button for a new transaction. My problem is that I am returning the column definitions and current state from a functional component and attempting to set state via a useState.
A short snippet of the code in question is shown below. The action component contains the values from the currently edited row. The object transaction does not contain the values of the currently edited row because of the asynchronous nature of useState/setState. If a new transaction is added though, the handler function newTransactionHandler does return the correct state.
I cannot figure out how to proceed because I would be forced to declare multiple objects and then attempt to figure out which is current. I have not found a solution that works to resolve this either or maybe I have over complicated the code. Can anyone offer a suggestion? The logic in this is dependent on the editing and deleting members returned by action, but also present in the transaction object returned by the handler. I have seen posts about using a callback to get the prior state but was unable to get this to work. Also, I have seen posts about using dispatch with a reducer but this has confused me. Any help is greatly appreciated.
import Transaction from './transaction/transaction';
import ColumnDefinitions from './column-definitions/columndefinitions';
function Checking(){
const [rowData, setRowData] = useState([]);
const {columns, action} = ColumnDefinitions();
const [transaction, setTransaction] = useState(action);
.
.
.
const newTransactionHandler = () => {
setTransaction({
editing: true,
deleting: false,
data: {
id: 0,
credit: false,
transactionAmount: '',
accountBalance: '',
transactionDate: '',
confirmation: '',
comment: ''
}
});
};
.
.
.
let checkbookTransactions = (
<>
<div>
<div className='buttonLayout'>
<Button caption={'New Transaction'} onClick={newTransactionHandler} />
</div>