Introducing the folowing to avoid undefined TypeError in react causes a weird bug

Question

I am working in React and came across an undefined type error. So to do this, I did the following, which was introduce the || {} in the return statement. Basically it solves the issue in which it doesnt throw a type error anymore, however, there is now a bug in which it renders an empty state, even though there is data. I think the data just loaded slow. Is there any way

Answer 1

Your {} doesn't make sense where it is.

return amountByCurrency.find(acct => acct.id === currentAccountId || {}).assets;

The callback is:

acct => acct.id === currentAccountId || {}

So, with the first element of the array, either acct.id === currentAccountId is fulfilled, and the callback returns true, or it falls back to {}, and objects are truthy, so the callback returns - and the first element of the array is the resulting "found" item.

If no items exist in the array, an error will be thrown, because there's nothing to iterate over. The empty object in the callback doesn't do anything other than break the .find logic.

You should instead do something like

filterCurrencyBalances() {
    const { amountByCurrency, amountByAsset, currentAccountId } = this.props;
    if (currentAccountId) {
        const foundAcct = amountByCurrency.find(acct => acct.id === currentAccountId);
        return foundAcct ? foundAcct.assets : 0; // replace 0 with the desired default balance for no account
    }
    return amountByAsset;
}