Be careful with truthy check and short circuit

I wrote this piece of code and received a very good feedback from the PR review.

Anyone notice the issue about this code?

It’s convenience to write thing like this, truthy check with short circuit to display something we want in certain condition.

It would work most of them time when the code passed in correct value for table[key] , the table[key] is either table object or null

However, weird things may happen and we should write better code to avoid corner case.

When there are falsy value like 0 and NaN , it would stop at the short circuit condition and return falsy value directly, which display 0 and NaN on the screen and this is an expected behavior.

This is the problem that may happen when we combined truthy check and short circuit.

Solution

Don’t use truthy check and use ternary

return table[key] != null ? <TableCard key={key} {...table[key]} /> : null;

This way it will be more explicit that it will return null when table[key] != null