Suggest an edit

Improve this article

Refine the answer for “Why className, not class?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

### Short answer

JSX uses `className` **instead of** `class`,
because `class` is a **reserved word in JavaScript**,
and JSX is **not HTML but JavaScript syntax** that just *looks* like HTML.

---

### Detailed explanation

Under the hood, JSX turns into ordinary **JavaScript code**.
For example:

```javascript
<div className="button">Button</div>
```

turns into:

```javascript
React.createElement("div", { className: "button" }, "Button");
```

If you had written:

```javascript
<div class="button">Button</div>
```

then during compilation this would look like:

```javascript
React.createElement("div", { class: "button" }, "Button");
```

But in JavaScript you **cannot use** `class` **as a property name** in a plain object without quotes,
because `class` is a **keyword** for declaring classes:

```javascript
class Button {}
```

So React (and Babel) **deliberately replace** `class` **with** `className`,
so there are no syntax conflicts and the code stays valid JS.

---

### Why `className` specifically

Because in the browser's **DOM API**, the property for CSS classes is also called `className`.

An example from plain JavaScript:

```javascript
const el = document.createElement("div");
el.className = "button"; // correct
console.log(el.className); // "button"
```

If you try:

```javascript
el.class = "button"; // error: no such property
```

So React follows **the same rules as the DOM**,
so behavior is predictable and familiar.

---

### Example

Correct:

```javascript
<div className="card active">Content</div>
```

Error:

```javascript
<div class="card active">Content</div>
// JSX error: Unexpected token 'class'
```

---

### Summary

| In HTML | In JSX | Why |
|---|---|---|
| `class` | `className` | `class` is reserved in JS |
| `for` | `htmlFor` | `for` is reserved in JS (used in loops) |

---

### In one line

> JSX is JavaScript, not HTML.
> That is why `className` is used instead of `class`, to avoid a conflict with the `class` keyword.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts288 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.