React adds "className" to DOM instead of "class" in IE11

[vydimitrov]

Do you want to request a feature or report a bug?
It is a bug

What is the current behavior?
React adds "className" to the DOM instead of "class" property.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

Open the link below in IE11 and inspect the DOM. There will be the following h1 - <h1 className="test-ie11-bug">Hello React :)</h1>
https://vydimitrov.github.io/react-simple-boilerplate/

Link to the test repo:
https://github.com/vydimitrov/react-simple-boilerplate

What is the expected behavior?
To add "class" to DOM when an element has property "className"

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React 16.3.0-alpha.1
Internet Explorer 11 - version 11.540.15063.0

It works as expected in React 16.2.0

[aweary]

Thanks for the report and reproduction @vydimitrov! I investigated, and it turns out this is because of #11815, specifically these lines. IE11 has a native Map implementation, but it doesn't support initializing Map with an iterable, so that maps ends up empty. That means that className and the other props in that map are all being missed and treated as unknown attributes.

I've opened #12353 which should fix this.

[nobodysfool]

Ok

[vydimitrov]

Thank you for the detailed answer @aweary. It makes sense to me.

[gaearon]

Thanks for reporting!