All lessons T
Frontend Utilities intermediate 12 min

Convert HTML Into JSX Without Breaking Attributes

Convert markup into JSX while preserving semantics and React-friendly attribute names.

Scenario

A designer hands over working HTML for a form field, and pasting it straight into a React component greets you with Warning: Invalid DOM property 'class'. Did you mean 'className'? — and a label whose for silently does nothing because JSX expects htmlFor. HTML-to-JSX differences are small, mechanical, and easy to half-do by hand: you fix the class the linter caught and miss the for it did not.

Broken input

<label for="email" class="field-label"><input id="email" disabled></label>

Goal

Use HTML to JSX Converter to translate the attributes mechanically — class → className, for → htmlFor, void-element self-closing — so nothing depends on remembering the full rename list.

Tool sequence

  1. Open HTML to JSX Converter.
  2. Paste the designer's HTML unchanged.
  3. Convert and read the diff-like differences: both reserved-word attributes renamed, and the <input> self-closed as JSX requires.
  4. Check disabled stayed as a bare boolean prop — JSX accepts it, and rewriting it to disabled="disabled" would be a step backwards.
  5. Drop the JSX into the component and run it through Code Formatter so it matches the file's Prettier style before review.

Checkpoint output

<label htmlFor="email" className="field-label">
  <input id="email" disabled />
</label>

class became className, for became htmlFor, and the input self-closes — React renders it without warnings and the label stays wired to its input.

Common mistakes

  • Fixing class by hand and missing for — the label silently loses its input association, an accessibility bug with no console warning.
  • Renaming things inside visible text or string values instead of only attributes.
  • Leaving inline style="..." strings for JSX, which needs a style object, not a string.
  • Treating conversion as a design review — translate the syntax first, argue about the markup after it runs.

Related tools and lessons