Checked Items is undefined on selection React JS

Question

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 
})

kiranvj · Accepted Answer · 2022-04-12 09:54:09Z

1

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]);

edited Apr 12, 2022 at 9:54

answered Apr 12, 2022 at 9:29

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Checked Items is undefined on selection React JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related