5

I have a student who submitted code which includes a number of class (not className) attributes. For instance:

import React, { Component } from "react";

class Images extends Component {
    render() {
        return (
            <div class="gallery">
                <div class="zoom"><img src="foo.jpg" alt="Foo"/></div>
                <div class="zoom"><img src="bar.jpg" alt="Bar"/></div>
            </div>
    );
}

But somehow his code works, and generates actual HTML class attributes. I even tried deleting a line, to make sure the code was actually being used, but sure enough the corresponding line was removed in the output.

I don't understand how this could be working. The student used create-react-app, which uses the react-scripts library to compile/run the site, but I couldn't find any mention of either one converting class to className:

https://facebook.github.io/create-react-app/

https://github.com/facebook/create-react-app/tree/master/packages/react-scripts

Can anyone explain this witchcraft? ;)

P.S. Relevant library versions:

"jsx": "^0.9.89",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"@babel/preset-react": "^7.0.0",
JJJ
  • 32,902
  • 20
  • 89
  • 102
machineghost
  • 33,529
  • 30
  • 159
  • 234
  • Looks like this might be a feature of React 16 https://stackoverflow.com/questions/46989454/class-vs-classname-in-react-16 – richbai90 Dec 05 '18 at 18:29
  • The top answer there says "Nothing has changed in that regard." There is a (lower-voted) answer there that points to a bug proposing to support `class`, but if you follow it to its related PR you'll see Dan Abramov saying he changed his mind because of browser issues and that it's not going to happen. I tried to do my homework and search SO first before posting here :) – machineghost Dec 05 '18 at 18:31
  • This change happened with `React@16`. You can also use `class` but not in all cases: https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail – bamse Dec 05 '18 at 18:36
  • Thank you @bamse; if you'd like to put that in the form of an answer I'll happily accept it. – machineghost Dec 05 '18 at 18:40
  • Cheers! You have a student who started studying after `React@16` came out :) – bamse Dec 05 '18 at 18:42
  • Heh, well now I almost feel bad for teaching that `className` is required, but since it still seems to be strongly encouraged (because of `const { class } = props;` issues outside the JSX) I don't feel too bad. – machineghost Dec 05 '18 at 18:45

1 Answers1

3

This change happened with React@16. You can also use class but not in all cases: https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail

bamse
  • 4,243
  • 18
  • 25