Fix React "Invalid DOM property `class`"

What the error means

JSX looks like HTML but compiles to JavaScript, and attributes become properties on DOM elements. Some HTML attribute names collide with JavaScript reserved words — class, for — and others do not match the DOM property they set — tabindex versus tabIndex, maxlength versus maxLength. React therefore expects the property names. Warning: Invalid DOM property \class`. Did you mean `className`?` is React telling you, at runtime in development, that an attribute was written the HTML way.

It is a warning, not a crash: React still renders, and in recent versions class is even passed through. But the warning is right that the code is inconsistent, and in older versions the attribute was silently dropped, so the styling disappeared.

Why it happens

• Pasting HTML into a component without translating the attributes.
• for on labels and class on anything — the two reserved words — are the most common because they are the most common attributes.
• Hyphenated SVG attributes such as stroke-width and fill-opacity, which become strokeWidth and fillOpacity.
• Compound lowercase attributes such as tabindex, readonly, autocomplete, colspan, srcset, which are tabIndex, readOnly, autoComplete, colSpan, srcSet.
• Inline style as a string. JSX wants an object: style={{ fontSize: 12 }}, not style="font-size: 12px".

How to fix it

1. Paste the HTML into the converter above. It renames every affected attribute — class, for, the SVG hyphenated set, the lowercase compounds — converts the style string to an object, self-closes void elements, and escapes braces in text.
2. Leave data-* and aria-* attributes alone; they keep their hyphenated names in JSX, and the converter does not touch them.
3. For event handlers, HTML's onclick="..." becomes onClick={handler} — a function reference, not a string. The converter renames the attribute; you supply the function.

The converted example:

<label htmlFor="email" className="field">Email</label>

If it still fails

• A custom element (<my-widget>) keeps HTML attribute names; React treats unknown elements differently. The warning is for standard DOM elements.
• If the warning names an attribute the converter left untouched, it is probably a typo rather than a mapping: classname in all lowercase is neither valid HTML nor valid JSX.
• Utility-class markup grows long in className; CSS to Tailwind maps existing declarations onto classes if you are migrating a stylesheet at the same time.