What does the className attribute mean in JSX?

className is used instead of class in JSX because class is a JavaScript keyword. All JSX gets turned into vanilla JavaScript. If you wrote class it would try to make a JavaScript class and not make an element that has a class.

So, when you write react it looks like this.

const name = 'Maddie';
const element = <h1 className="myName">Hello, {name}</h1>;

Then something like babel will take that code and turn it into vanilla JavaScript:

var name = 'Maddie';
var element = React.createElement("h1", {
  className: "myName"
}, "Hello, ", name);

In vanilla JavaScript className is used to assign classes because the class keyword makes a different type of class.

Related Posts:

  1. Invariant Violation: Objects are not valid as a React child
  2. Invariant Violation: Objects are not valid as a React child
  3. “SyntaxError: Unexpected token < in JSON at position 0"
  4. How to use Redirect in the new react-router-dom of Reactjs
  5. React.js: Set innerHTML vs dangerouslySetInnerHTML
  6. React – uncaught TypeError: Cannot read property ‘setState’ of undefined
  7. Understanding unique keys for array children in React.js
  8. How to do a redirect to another route with react-router?
  9. Jest spy on functionality
  10. Difference between npx and npm?
  11. Reactjs – Form input validation
  12. TypeScript React.FC confusion
  13. Error Running React Native App From Terminal (iOS)
  14. Axios Delete request with body and headers?
  15. Loop inside React JSX
  16. Can’t resolve module (not found) in React.js
  17. How to implement navbar using react
  18. Loop inside React JSX
  19. Understanding React-Redux and mapStateToProps()
  20. how to render a react component using ReactDOM Render
  21. React this.setState is not a function
  22. Console logging for react?
  23. Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag
  24. ‘react-scripts’ is not recognized as an internal or external command
  25. After $npm install, Getting Error: Cannot find module ‘../lib/utils/unsupported.js’
  26. React Native: this.setState is not a function
  27. In reactJS, how to copy text to clipboard?
  28. SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag
  29. What is prevState in ReactJS? [duplicate]
  30. React with ES7: Uncaught TypeError: Cannot read property ‘state’ of undefined
  31. React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
  32. Setting a backgroundImage With React Inline Styles
  33. React – TypeError: Cannot read property ‘props’ of undefined
  34. How to pass props to {this.props.children}
  35. React eslint error missing in props validation
  36. React Context vs React Redux, when should I use each one?
  37. Setting onSubmit in React.js
  38. How to import image (.svg, .png ) in a React Component
  39. Uncaught TypeError: Cannot read property ‘props’ of null
  40. ReactJS: setTimeout() not working?
  41. React Uncaught Error: Target container is not a DOM element [duplicate]
  42. How to refresh a Page using react-route Link
  43. React Error: Target Container is not a DOM Element
  44. How to implement authenticated routes in React Router 4?
  45. React Js: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
  46. Console is throwing Unterminated JSX contents error
  47. How to scroll to an element?
  48. How to handle the `onKeyPress` event in ReactJS?
  49. setInterval in a React app
  50. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  51. Failed to compile. Module not found: Can’t resolve ‘react-router-dom’
  52. ReactJS: setTimeout() not working?
  53. What does “export default” do in JSX?
  54. How to add multiple classes to a ReactJS Component?
  55. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  56. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
  57. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
  58. React.js – Can’t read property of undefined
  59. module.exports “Module is not defined”
  60. how to download file in react js
  61. Trying to use fetch and pass in mode: no-cors
  62. React’s setState method with prevState argument
  63. onEnter not called in React-Router
  64. Pass react component as props
  65. Uncaught TypeError: Cannot read property ‘call’ of undefined at __webpack_require__
  66. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
  67. How to clear react-native cache?
  68. Async/await in componentDidMount to load in correct order
  69. Why use Redux over Facebook Flux?
  70. Local package.json exists, but node_modules missing
  71. react router v^4.0.0 Uncaught TypeError: Cannot read property ‘location’ of undefined
  72. Access Control Origin Header error using Axios
  73. Cannot read property ‘getHostNode’ of null
  74. Can’t perform a React state update on an unmounted component
  75. how to use react require syntax?
  76. onClick not working React js
  77. This.props.dispatch not a function – React-Redux
  78. React-Router : What is the purpose of IndexRoute?
  79. How to add a keyboard listener to my onClick handler?
  80. How to add a keyboard listener to my onClick handler?
  81. React router not showing browser history
  82. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  83. command not found: jest
  84. Jest encountered an unexpected token
  85. ReactJS – .JS vs .JSX
  86. ReactJS: Maximum update depth exceeded error
  87. React, Uncaught ReferenceError: ReactDOM is not defined
  88. How to allow CORS in react.js?
  89. Invariant Violation: _registerComponent(…): Target container is not a DOM element
  90. Uncaught ReferenceError: React is not defined
  91. What do these three dots in React do?
  92. Expected ‘this’ to be used by class method
  93. What does “export default” do in JSX?
  94. Update style of a component onScroll in React.js
  95. where is create-react-app webpack config and files?
  96. Correct modification of state arrays in React.js
  97. JSX not allowed in files with extension ‘ .js’ with eslint-config-airbnb
  98. “React.Children.only expected to receive a single React element child” error when putting and in a
  99. Getting “Cannot call a class as a function” in my React Project
  100. Await is a reserved word error inside async function

Leave a Comment