React Conditional Rendering, avoid 0 evaluated to false/undefined

Question

I have checked the other Q/As. Mine is a bit different and I'm new to ReactJS.

Following code for setting const variable evaluates 0 as false/undefined and value returned from myFunc is "" :

function formatAmount(x){
  if(x === undefined || x === null) return "";
  return(x.toLocaleString("en-US",{style: "currency", currency: "USD"}));
}
//When user.bill.amount == 0 this line evaluates it to false!!
const amount = user?.bill?.amount || user?.statement?.amount;

function myFunc(){
  return(formatAmount(amount));
}

I tried expanding it with a function and IF conditions but the value returned by myFunc is "$NaN":

const amount = () => {
  if(user?.bill?.amount || user?.bill?.amount === 0){
    return user?.bill?.amount;
  }
  if(user?.statement?.amount || user?.statement?.amount === 0){
    return user?.statement?.amount;
  }
}

Expected:

When user.bill.amount == 0, myFunc should return "$0.00"

Actual:

myFunc returns empty string when user.bill.amount == 0

@Lenin Raj Rajasekaran, My question is how do I get myFunc to return "$0" when user.bill.amount == 0. I will edit the question, thanks for the feedback! — aahmed31
– aahmed31, Commented Jul 17, 2020 at 22:49

EvanMorrison · Accepted Answer · 2020-07-17 23:01:07Z

2

I think the problem here is 0 is falsy so when using || operator 0 will evaluate to false.

const amount = user?.bill?.amount || user?.statement?.amount;

If your environment supports the nullish operator that would work here.

const amount = user?.bill?.amount ?? user?.statement?.amount;

answered Jul 17, 2020 at 23:01

EvanMorrison

1,2278 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

React Conditional Rendering, avoid 0 evaluated to false/undefined

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