Why does JSX use className and htmlFor instead of class and for?
JSX compiles to JavaScript, where class and for are reserved words. React therefore uses the DOM property names className and htmlFor. Most other attributes are written in camelCase too, such as onClick and tabIndex.
Explain it simply
JSX tags are JavaScript objects underneath, and attributes become object properties. In JavaScript, class starts a class definition and for starts a loop, so they would confuse the parser. The DOM already has the names className and htmlFor for the same jobs, and React borrows those.
The pattern is simple: HTML attribute names turn into camelCase DOM property names. onclick becomes onClick, tabindex becomes tabIndex. Attributes starting with data- and aria- keep their hyphens.
Example
<label htmlFor="roll">Roll number</label>
<input id="roll" className="field" tabIndex={0} data-testid="roll" />Event handlers get a function, not a string: onClick={save}, never onclick="save()".
What to say in the interview
"class and for are reserved words in JavaScript, and JSX props become object keys, so React uses className and htmlFor, matching the DOM property names. Other attributes follow camelCase, like onClick and tabIndex, while data- and aria- attributes stay hyphenated."
Common mistakes
- Passing a string to onClick instead of a function.
- Forgetting htmlFor, so clicking the label does not focus the input.