Warn if rendering an HTML tag spelled with uppercase letters

[bmcmahen]

If I try running the following code:

var Hello = React.createClass({
    render: function() {
      return React.createElement('BR', null);
    }
});

React.render(<Hello/>, document.body);

I get two <br> tags inserted into the dom, instead of one. I made a quick jsfiddle to show this. http://jsfiddle.net/kb3gN/8662/

I'm running Chrome, if that's at all relevant.

[CodisRedding]

@bmcmahen I'm looking at the elements created in the Chrome dev tools but I only see a single
. Can you screen shot the 2 br's you're seeing?

[dashed]

I can confirm in Chrome Version 40.0.2214.45 beta (64-bit) and Firefox 34.0.5.

Here's a jsbin:
http://jsbin.com/hiqiva/1/edit?html,js,output

[CodisRedding]

So in chrome it's got

<br data-reactid=".0"><br>

and ff has

<br data-reactid=".0"></br><br></br> 

?

[CodisRedding]

Well since br is a supported tag, there should be a test already.

[gaearon]

Perhaps React generates <br></br> and browser interprets it as two tags? Interesting.

[CodisRedding]

Try

React.createElement('br');

I get different results with lowercase.

[gaearon]

Interestingly, it doesn't happen if you type br as lowercase.

EDIT: beat me to it :-)

[gaearon]

Relevant check in source code: https://github.com/facebook/react/blob/master/src/browser/ui/ReactDOMComponent.js#L183

Seems like this._tag.toLowerCase() should instead be checked. I wonder how React does it in other places though.

[dashed]

@gaearon's right.

I use JSX, so I do something like:

var Hello = React.createClass({
    render: function() {
      return <br />;
    }
});

It may be an implied convention: http://facebook.github.io/react/blog/2014/10/16/react-v0.12-rc1.html#jsx-lower-case-convention

[gaearon]

Ah, yeah. Even if it's a bug, it won't matter after capitalized tags will be disallowed.

[dashed]

In addition, the convention is that any tag names beginning with a capital letter should be user-land components.

[CodisRedding]

@dashed ++ "All JSX tags that start with a lower-case letter or contain a dash are treated as HTML."

[dashed]

Does this convention extend to folks exclusively using React.createElement? (I actually don't know b/c I only use JSX 😅 )

[CodisRedding]

Well considering that jsx gets transformed into js, I would think that all rules are the same.

[bmcmahen]

Whoops. Sorry -- just read all of this now.

I had no idea that using capital letters was something that should be avoided / would be disallowed. I'm actually using this within a context of parsing a limited number of tags in a contentEditable container, and the parser records the tagName as it does natively -- with capital letters. These are then passed into React.createElement which works perfectly -- except for the BR case.

Anyway, I will use lowercase tags from now on. Thanks!