class vs className in React 16

by

class is a keyword in javascript and JSX is an extension of javascript. That’s the principal reason why React uses className instead of class.

Nothing has changed in that regard.

To expand this a bit more. A keyword means that a token has a special meaning in a language syntax. For example in:

class MyClass extends React.Class {

Token class denotes that the next token is an identifier and what follows is a class declaration. See Javascript Keywords + Reserved Words.

The fact that a token is a keyword means that we cannot use it in some expressions, e.g.

// invalid in older versions on Javascript, valid in modern javascript
const props = {
  class: 'css class'
}

// valid in all versions of Javascript
const props = {
 'class': 'css class'
};

// invalid!
var class="css";

// valid
var clazz = 'css';

// valid
props.class="css";

// valid
props['class'] = 'css';

One of the problems is that nobody can know whether some other problem won’t arise in the future. Every programming language is still evolving and class can be actually used in some new conflicting syntax.

No such problems exist with className.

More Related Contents:

  1. Is there a “Best Practices” on designing an application written both in React and React-Native?
  2. Programmatically navigate using React router
  3. What’s the difference between “super()” and “super(props)” in React when using es6 classes?
  4. How to set one component’s state from another component in React
  5. Template not provided using create-react-app
  6. Is it possible to use if…else… statement in React render function?
  7. Component does not remount when route parameters change
  8. How to cancel a fetch on componentWillUnmount
  9. React.createElement: type is invalid — expected a string
  10. What is use of curly braces in an ES6 import statement?
  11. Handling async request with React, Redux and Axios?
  12. react setState with dynamic key
  13. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  14. How to access the “key” property from a reactjs component
  15. react-router vs react-router-dom, when to use one or the other?
  16. How to use Google fonts in React.js?
  17. Unexpected block statement surrounding arrow body
  18. Reactjs: Unexpected token ‘
  19. React – the right way to pass form element state to sibling/parent elements?
  20. Pass multiple parameters to event handlers in React
  21. Persistent navigation in a NextJs _app
  22. How to resolve “Cannot use import statement outside a module” from Jest when running tests?
  23. VirtualizedList: You have a large list that is slow to update
  24. is it possible to React.useState(() => {}) in React?
  25. How to minimize the size of webpack’s bundle?
  26. How to enable file upload on React’s Material UI simple input?
  27. ESLint Must use destructuring state assignment
  28. create react app not picking up .env files?
  29. React Hook useEffect has a missing dependency: ‘list’
  30. Show/Hide components in ReactJS

Leave a Comment