camelCase DOM Property Mapping in JSX

In JSX, many DOM properties and event handlers use JavaScript-style camelCase names rather than the corresponding HTML attribute spelling. This mapping matters because JSX represents DOM properties through a JavaScript-oriented API.

JSX uses names that generally follow the DOM property API rather than copying HTML attribute spelling exactly. For example, `tabindex` becomes `tabIndex`, and `class` is written as `className` in JSX.

The same idea applies to event handlers: HTML uses names such as `onclick`, while JSX uses `onClick`. Event handler names are case-sensitive, so the JSX spelling must match the expected property name.

Not every HTML attribute simply becomes camelCase. Some JSX names differ because the underlying DOM API uses a different property name, such as `htmlFor` corresponding to the HTML `for` attribute. Other attributes, including many `data-*` and `aria-*` attributes, retain their hyphenated form in JSX.

When working with a less familiar attribute, check the framework's JSX documentation and the relevant DOM API rather than assuming that mechanically capitalizing a word will always produce the correct name.

Key points

• JSX commonly uses DOM-style camelCase property names.
• `class` becomes `className`, while `for` becomes `htmlFor`.
• Event handlers use camelCase names such as `onClick`.
• `data-*` and `aria-*` attributes retain their hyphenated spelling.
• JSX identifiers are case-sensitive.

Interview questions

Are all JSX attributes camelCase?

No. Many standard DOM properties use camelCase, but there are important exceptions. React-style JSX preserves names such as `data-user-id` and `aria-label` in their hyphenated form. Some attributes also have framework-specific property names, so blindly converting every HTML attribute to camelCase is unsafe.

Give examples of HTML attributes whose JSX names differ.

Common examples include `class` to `className`, `for` to `htmlFor`, and `tabindex` to `tabIndex`. Event attributes also follow camelCase conventions, such as `onclick` becoming `onClick`. The exact mapping should be based on the JSX and DOM API rather than a blanket capitalization rule.

Why does JSX use `className` instead of `class`?

JSX uses a JavaScript-oriented representation of DOM properties, and the DOM property exposed for an element's CSS class is `className`. Therefore React-style JSX normally uses `className` rather than the HTML attribute spelling `class`. The distinction also avoids treating JSX as plain HTML text.

Why can incorrect casing break a JSX event handler?

JSX property names are case-sensitive, and event handlers are represented using specific property names such as `onClick`. Writing a different casing does not necessarily identify the intended event handler. This reflects the fact that JSX is compiled or interpreted as JavaScript-oriented element configuration rather than parsed as ordinary HTML source.