HTML to JSX converter doesn't correctly parse className parameter in tag

[merges]

1. Visit http://facebook.github.io/react/html-jsx.html
2. Paste <div className="blah"></div> into Live JSX Editor
3. Observe conversion

EXPECTED RESULT
className is still className in the conversion

ACTUAL RESULT
className is converted to classname; this is invalid JSX

[syranide]

Oops! Yeah that's weird.

[merges]

Ah, I thought that as supported attributes the converter would parse them correctly?
http://facebook.github.io/react/docs/tags-and-attributes.html#supported-attributes

[syranide]

@merges Hmm, I think it's labeled a little weirdly, you're supposed to paste HTML to the left (i.e <div class="blah"></div>) and see what it becomes in JSX to the right... I think? This doesn't really make sense to me.

[merges]

The issue I had was that I had partially supported JSX, and needed to use the converter to check something in a large block of markup. It correctly fixed that problem, but spit out the aforementioned classname attribute which isn't supported.

[zpao]

Yea, that's labeled weirdly, you should be pasting HTML into the left.

But we should probably leave case intact for unrecognized attributes (cc @Daniel15)

[Daniel15]

The input field wasn't labelled as "Live JSX Editor" when I initially built the page, I guess that's a more recent change.

I think the issue with the className attribute is that the HTML to JSX converter uses the browser's HTML parsing, which normalises the case of attributes. I could special-case classname so it always gets changed to className, or alternatively use a full proper HTML parser (which I didn't do initially due to time constraints).

[Daniel15]

Moving this issue to https://github.com/reactjs/react-magic since the HTMLToJSX converter now lives entirely in that project.