I have list from backend. I want to loop through all the elements of this list and hide the button if it has no status 6.
response
Returning from the response in the incoming list. It won't always be like this. It can come in 7 elements.
policyInstallmentDtoList: Array(1)
0:
amount: 291
currency: "TRY"
date: "10-02-2022"
installmentNumber: 1
status: "3"
I'm trying to loop through the list here.
useEffect(() => {
if (paymentInfoData?.policyInstallmentDtoList?.forEach((e) => e['status'] !== '6')) {
setHiddenControlButtonClass('hidden');
}
}
html
<div className={hiddenControlButtonClass}>
<AS.Button variant="outlined" onClick={handlePayment}>
Devam
</AS.Button>
</div>
You can use Array.some
It's a built-in method in JS's array prototype which returns a boolean value that represents whether or not at-least a single member in the array answers your condition.
useEffect(() => {
if (!paymentInfoData?.policyInstallmentDtoList?.some(e => e.['status'] === '6') {
setHiddenControlButtonClass('hidden');
}
}
This should work just fine and only set the state once,
which is better for performance.
You don't need to put the forEach method in an if statement.
useEffect(() => {
paymentInfoData?.policyInstallmentDtoList?.forEach((e) => {
if (e.status !== '6') {
setHiddenControlButtonClass('hidden');
}
}
}