Component attempting to render unexpected value renders <undefined></undefined>

[dharFr]

Components attempting to render something that is neither a component, or a null/undefined value, results in an <undefined></undefined> node rendered to the DOM.

e.g. :

• const Zero = () => (0) => renders <undefined></undefined>
• const Number = () => (42) => renders <undefined></undefined>
• const False = () => (false) => renders <undefined></undefined>

Here is a test case to reproduce.

Not sure how it is supposed to behave, but rendering <undefined></undefined> does feel appropriate to me and might lead to unexpected behaviors.

[dharFr]

Just tested out of curiosity, and React seems to throw an error in such situations.

[developit]

Ah yep, this makes sense. In 7 or 8 (don't remember), we moved type handling into h(), but the root of a component is not passed through h() if it's a literal value. Good call.

Seems like the solution is just to extend this condition a bit:
https://github.com/developit/preact/blob/master/src/vdom/diff.js#L69

Something like:

if (vnode==null || vnode===false || vnode===true) vnode = '';

if (typeof vnode==='string' || typeof vnode==='number') {
  // ...

[dharFr]

So the idea would be to avoid throwing an error by silently ignoring booleans + implicitly converting numbers, right?

Doesn't seem that difficult. I'll try to send a PR.