DOM nesting warning is confusing for whitespace (and text in general)

When a user puts a textnode (whitespace) in an illegal location, our warning complains about a span element (because we wrap text - including whitespace - in a span). This is confusing for new users, since there is no span present in their code and the introduction of the span tag is an implementation detail of React. We should fix the warning to better align with the code the user is looking at.

var rows = <tr></tr>;
React.render(<table><tbody> {rows} </tbody></table>, document.getElementById('container'));

[Ajaybhardwaj7]

It took me nearly one hour until I came to this page to know about the actual cause of warning. There were one whitespace between my and like this and here it went everything confusing to understand this kind of bug. “#text cannot appear as a child of ”. Really hard to resolve by this message.

[jimfb]

@spicyj I think this might be a bit advanced to be a good-first-bug. Specifically, we need to handle three general cases:

• The user actually specified a span: <table><span>foo</span></table>. In which case, we should indicate that there is a span.
• The user did not specify a span, but did specify child text: <table>foo</table>
• The user did not specify a span, but did specify only whitespace: <table> </table>. In which case, we should call out the whitespace, because if we just call it text, it’ll be easy to miss and be confused about what’s going on. Whitespace includes tabs, newlines, and spaces.