Why does React conditional rendering render NaN?

Question

Given value = NaN When value && value > 0 && <Component>.

For some reason, the app renders "NaN" rather than not rendering anything. Am I missing something? I would have thought that because NaN is not greater than 0...it would not render anything?

did you check if value > 0 returns true if value = NaN? Since it seems your if statement returns true if it renders NaN — JSRB
– JSRB, Commented Jun 23, 2020 at 15:41
NaN is considered truthy so when NaN > 0 fails the chained && will just "return" the last truthy part of it. — apokryfos
– apokryfos, Commented Jun 23, 2020 at 15:42
@apokryfos where did you find that NaN is truthy? here states the opposite: developer.mozilla.org/en-US/docs/Glossary/Falsy — Mario Vernari
– Mario Vernari, Commented Jun 23, 2020 at 15:44
@MarioVernari No you're right I misspoke. The failed && will return the value it failed with. That seems to be in that link as well — apokryfos
– apokryfos, Commented Jun 23, 2020 at 15:45

Sean · Accepted Answer · 2020-06-23 16:22:33Z

3

The logical AND (&&) expression syntax is:

expr1 && expr2

According to the documentation:

If expr1 can be converted to true, returns expr2; else, returns expr1.

Because NaN is expr1 and is falsy, NaN is returned.

If you want the component to render only if value exists and is a number greater than 0, you may be able to simply write:

value > 0 && <Component>

edited Jun 23, 2020 at 16:22

answered Jun 23, 2020 at 15:51

Sean

8,3875 gold badges30 silver badges55 bronze badges

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

1 Comment

apokryfos Over a year ago

Sidenote: The react docs seem to say that only null and false values do not produce any rendered output. I guess undefined might work as well but other falsy values are rendered

JSRB · Accepted Answer · 2020-06-23 15:51:18Z

0

so you basically might give this a shot

if value !== NaN {
    if value && value > 0 && <Component> {
       // do something 
    } else {}
} else {}

or chain the entire logic, but personally I'd prefer this for readability

answered Jun 23, 2020 at 15:51

JSRB

2,6252 gold badges20 silver badges58 bronze badges

Collectives™ on Stack Overflow

Why does React conditional rendering render NaN?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related