I'm trying to read all checked items and storying that value to selectedTransaction.
Issue is when I check the 1st item, it throws undefined error & for the selection of the 2nd Item it shows 1 array item in the console log.
But if I console log the selectedTransactions, it shows correct item values.
What I'm doing wrong here. Please help
const [selectedTransaction, setSelectedTransaction] = useState<any>();
const handleCheckboxOnChange = (
transactionDetails: TransactionDetail,
isCheckeds: boolean,
) => {
const selectedTransactions = transactionsList.transactionDetails
.filter((item: TransactionDetail) => item.isChecked === true);
setSelectedTransaction(selectedTransactions);
console.log(selectedTransactions); // Shows 1 selected Item
console.log(selectedTransaction); // Shows undefined
})
State is not updated immediately (its asynchronous and batched), thats why you are getting undefined or the previous state
setSelectedTransaction(selectedTransactions);
console.log(selectedTransactions); // Shows 1 selected Item
console.log(selectedTransaction); // Shows undefined
Use a useEffect to console state when data is changed. Give the dependency array [selectedTransaction]
useEffect(()=>{
console.log(selectedTransaction);
}, [selectedTransaction]);