0

when doing conditional rendering, if we do such thing:

<p>{NaN && <div>Hello</div>}</p>

it will evaluate to NaN and will render it on screen. but in React document itself, NaN is not mentioned.

A React node can be:

  • A React element created like <div /> or createElement('div')
  • A portal created with createPortal
  • A string
  • A number
  • true, false, null, or undefined (which are not displayed)
  • An array of other React nodes

I confused about it.

https://react.dev/reference/react/isValidElement#isvalidelement

VLAZ
  • 26,331
  • 9
  • 49
  • 67
user16069077
  • 19
  • 3
  • 2
    `NaN` is a number. And it says a number is a valid React node. Seems like it's explained. – VLAZ Aug 30 '23 at 18:06
  • https://stackoverflow.com/a/10498549/17709311 – Saraf Aug 30 '23 at 18:08
  • @VLAZ thank you. may you give me a link about `NaN` to know more about it? I want to know why it is a Number. – user16069077 Aug 30 '23 at 18:24
  • 1
    See the linked duplicates. It's rather simple if you think about the problem of numbers. There are some things that just have to be numbers. If you do `3 * a` then the result *must* be a number as it's a numeric operation. However, if `a = "banana"` then there is no way to derive a sensible number from it. Yet it has to be a numeric value. Hence `NaN`. It is a value which is a marker for nonsensical numeric values. Anything that cannot usefully be converted to a number but does turns into `NaN`. Thus the domain of the result still remains just numbers without having to split it. – VLAZ Aug 30 '23 at 18:29
  • @VLAZ. wow. explained so well. I understood. thanks again – user16069077 Aug 30 '23 at 18:31

0 Answers0