I have the following in my React ponents render function:

return (
  <div>
      {rating.score && (
       <div>do something</div>
      )}
  </div>
);

rating.score has PropTypes.number.

The above works great when the number is 1 or more. The problem is 0 is a valid rating. When 0 is the rating.score the above breaks. What is the right way to handle this react conditional rendering situation?

FYI, something like this does not work:

{(rating.score && rating.score >= 0) && (
  <div>do something</div>
)}

This does seem to work:

{skillRating.rating !== undefined && (

Is this the right thing to do here?

I have the following in my React ponents render function:

return (
  <div>
      {rating.score && (
       <div>do something</div>
      )}
  </div>
);

rating.score has PropTypes.number.

The above works great when the number is 1 or more. The problem is 0 is a valid rating. When 0 is the rating.score the above breaks. What is the right way to handle this react conditional rendering situation?

FYI, something like this does not work:

{(rating.score && rating.score >= 0) && (
  <div>do something</div>
)}

This does seem to work:

{skillRating.rating !== undefined && (

Is this the right thing to do here?

• javascript
• reactjs

• 1 rating may be null. Try skillRating.rating != null. – Felix Kling Commented Mar 12, 2019 at 23:01
• skillRating.rating !== undefined should work fine – Chris Sandvik Commented Mar 12, 2019 at 23:16

5 Answers 5

Zero is NOT truthy value in JavaScript. This way you can render value that is 0 or more.

return (
  <div>
      {rating.score > -1  && (
       <div>do something</div>
      )}
  </div>
);

What happens is that 0 is a falsy value, it coerces to false in boolean context, however you can just check if the value is greater or equal to zero (assuming than negative values are not valid):

return (
  <div>
      {rating.score > 0 && (
       <div>do something</div>
      )}
  </div>
);

The condition on your edit doesn't work because in the expression rating.score && rating.score >= 0, the first operand, rating.score will be false.

In case rating.score is guaranteed to be either undefined or a number, it's:

(rating.score >= 0) && (...)

Notice that the same doesn't apply to other falsy values like null. In case there's a chance that it's falsy and not a number, this should bee:

(rating.score === 0 || rating.score > 0) && (...)

This also benefits the readability (at least for developers who are aware of issues explained above) because the condition is unambiguous.

There are many ways you can go about this and I can't say there is only one answer. One thing you might want to consider is using isFinite() global or Number methods i.e. Number.isInteger().

In these cases you can help check that the number you are working with is a valid number and will help guard against Infinty or NaN (although NaN is a falsy value anyways).

The benefit of isFinite is it will also do the conversion of numbers that are casted to string so "10" would pass. Not sure if that's a concern.

{isFinite(rating.score) && (
  <div>do something</div>
)}

My go-to in these situations is Boolean().

{Boolean(rating.score && rating.score >= 0) && (
  <div>do something</div>
)}