2

I've been trying out React on a project for weeks now. And I just remembered that I should use className instead of class in regular DOM and SVG, because class is a reserved keyword in JS.

However, all my components are using classso far. For example:

export default class Header extends React.Component {
    render() {
        return (
            <div class="Header">
                <img class="Logo" src="./interface/images/ea-white.png"/>
                <h1 class="Title">{this.props.title}</h1>
            </div>
        );
    }
}

Why haven't I got any syntax error? Does React DOM have to use className? What could happen if I keep it this way?

Edit: Yes, the CSS files worked normally all this time. There's no warning in my console (which is weird).

Jiayang
  • 738
  • 1
  • 7
  • 13
  • Yes, you have to use `className`. Does your CSS pick up `class` for your styling? – Andrew Nov 18 '17 at 03:25
  • @Andrew yes, everything works perfectly. I only noticed because a friend pointed it out... – Jiayang Nov 18 '17 at 03:27
  • Possible duplicate of [class vs className in React 16](https://stackoverflow.com/questions/46989454/class-vs-classname-in-react-16) – Abdennour TOUMI Nov 18 '17 at 03:27
  • @Jiayang I guess it gets transpiled to `className` anyways. It's definitely more conventional practice to use `className` right off the bat. – Andrew Nov 18 '17 at 03:29

2 Answers2

3

It currently works, but React will throw a warning in your console. I would recommend using className considering this is what React wants you to do. If you continue to use class, there may be a time when React stops supporting this.

Kyle Richardson
  • 5,567
  • 3
  • 17
  • 40
2

React throws a warning when you use an unknown property such as class on an element.

It also points to the source line number, thanks to this pr https://github.com/facebook/react/pull/6398

Nikhil Fadnis
  • 850
  • 6
  • 8
  • Where can I see the warning? Nothing in the console. I'm using webpack to compile. No warnings there either. – Jiayang Nov 18 '17 at 03:30