I'm getting a list from the backend. There are 5 objects in my incoming list. I want to loop through only those whose "status" is "6". There is also a "continue" button. I will not show this button depending on the situation.
response
status 3 = invoice paid
status 6 = unpaid invoice
policyInstallmentDtoList: Array(5)
0: {installmentNumber: 1, amount: 3032, currency: 'USD', status: '3', date: '09-06-2022'}
1: {installmentNumber: 2, amount: 3032, currency: 'USD', status: '3', date: '09-07-2022'}
2: {installmentNumber: 3, amount: 3032, currency: 'USD', status: '6', date: '09-08-2022'}
3: {installmentNumber: 4, amount: 3032, currency: 'USD', status: '6', date: '09-09-2022'}
4: {installmentNumber: 5, amount: 3032, currency: 'USD', status: '6', date: '09-10-2022'}
js
const [hiddenControlButtonClass, setHiddenControlButtonClass] = useState('policypaymentinfo__button_container');
useEffect(() => {
if (paymentInfoData?.policyInstallmentDtoList?.map((payment) => payment.status)) {
setHiddenControlButtonClass('hidden');
} else {
setHiddenControlButtonClass('policypaymentinfo__button_container');
}
}, [paymentInfoData]);
policyInfoData is the name of the incoming list.
I want to loop through the status 6 in the first if block.
html
<PaymentTable variant="edit" paymentList={paymentInfoData} value={value} collectionMethod={collectionMethod} />
<div className={hiddenControlButtonClass}>
<AS.Button variant="outlined" onClick={handlePayment}>
Contiune
</AS.Button>
</div>
You can do this:
useEffect(() => {
paymentInfoData?.policyInstallmentDtoList?.forEach(item => {
if(item.status == '6') {
setHiddenControlButtonClass('hidden');
} else {
setHiddenControlButtonClass('policypaymentinfo__button_container');
}
})
}, [paymentInfoData]);