HTML to JSX: Common Conversion Problems Frontend Developers Still Make

// ❌ Invalid: 'class' is a reserved keyword; 'for' conflicts with JS loop syntax // <label class="form-label" for="contact-email">Email Address</label> // <input id="contact-email" type="email" />

// ✅ Valid: Mapped to React DOM properties interface ContactFormProps { labelClass: string; inputId: string; }

export const ContactForm = ({ labelClass, inputId }: ContactFormProps) => { return ( <div className="form-group"> <label className={labelClass} htmlFor={inputId}> Email Address </label> <input id={inputId} type="email" autoComplete="email" /> </div> ); };

**Rationale:** Using `className` ensures compatibility with CSS modules and utility frameworks like Tailwind. The `htmlFor` attribute is critical for accessibility, linking labels to inputs for screen readers.

#### 2. Style Object Transformation

HTML inline styles are strings. JSX styles must be JavaScript objects. This allows for dynamic styling but requires a structural change. The double-brace syntax `{{ }}` denotes a JSX expression containing an object literal.

**Implementation:**

```tsx
// ❌ Invalid: Style expects an object, not a string
// <div style="background-color: #f8f9fa; padding: 16px; border-radius: 4px;">

// ✅ Valid: Style object with camelCase properties
const cardStyles: React.CSSProperties = {
  backgroundColor: '#f8f9fa',
  padding: '1rem',
  borderRadius: '0.5rem',
  boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
};

export const DashboardCard = ({ children }: { children: React.ReactNode }) => {
  return <div style={cardStyles}>{children}</div>;
};

Rationale: Extracting styles to constants or using CSS-in-JS libraries prevents object recreation on every render, which can cause unnecessary re-renders. In production, prefer extracting static styles to external stylesheets or using Tailwind classes to reduce bundle size and improve performance.

3. Fragment and Root Management

JSX requires a single root element per component return. HTML allows multiple siblings. Use fragments to group elements without adding extra nodes to the DOM.

Implementation:

// ❌ Invalid: Adjacent JSX elements must be wrapped
// return (
//   <Header />
//   <MainContent />
//   <Footer />
// );

// ✅ Valid: Using Fragment shorthand
export const Layout = () => {
  return (
    <>
      <Header />
      <main className="content-area">
        <MainContent />
      </main>
      <Footer />
    </>
  );
};

Rationale: Fragments <>...</> are preferred over wrapper <div> elements to avoid DOM bloat and CSS specificity issues. For cases requiring keys (e.g., lists), use the explicit <React.Fragment key={...}> syntax.

4. SVG Property Camelization

SVG attributes in HTML often use kebab-case. JSX requires camelCase for SVG properties to align with JavaScript property access patterns.

Implementation:

// ❌ Invalid: Kebab-case attributes cause warnings or failures
// <svg stroke-width="2" fill-rule="evenodd" clip-path="url(#clip)">

// ✅ Valid: CamelCase SVG properties
export const IconArrow = () => {
  return (
    <svg
      viewBox="0 0 24 24"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M5 12h14M12 5l7 7-7 7" />
    </svg>
  );
};

Rationale: React maps SVG attributes to DOM properties. Properties like strokeWidth and fillRule must be camelCase. Note that viewBox is already camelCase in HTML, so it works in both, but stroke-width must become strokeWidth.

5. Void Element Self-Closing

HTML void elements (e.g., img, input, br, hr) do not require closing tags. JSX enforces XML-like syntax, requiring all elements to be closed.

Implementation:

// ❌ Invalid: Unterminated tag
// <img src="/assets/logo.png" alt="Brand Logo">
// <input type="text" name="search">

// ✅ Valid: Self-closing tags
export const SearchBar = () => {
  return (
    <div className="search-container">
      <img src="/assets/logo.png" alt="Brand Logo" />
      <input type="text" name="search" placeholder="Search..." />
      <hr className="divider" />
    </div>
  );
};

Rationale: The compiler parses JSX as XML. Unclosed void elements result in parse errors. Always include the trailing slash / for void elements.

Pitfall Guide

Even experienced developers encounter subtle traps when converting HTML to JSX. The following pitfalls highlight common mistakes and their resolutions.

Pitfall Name	Explanation	Fix
The Boolean Attribute Trap	In HTML, <button disabled="false"> is disabled because the presence of the attribute implies truthiness. In JSX, disabled="false" is a string, which is truthy. You must use a boolean expression.	Use disabled={false} or disabled={isDisabled}. Never pass string literals for boolean props.
Inline Style Object Recreation	Defining style objects inline within JSX (e.g., style={{ color: 'red' }}) creates a new object reference on every render. This can trigger unnecessary re-renders in child components.	Extract static styles to constants outside the component or use useMemo for dynamic styles. Prefer CSS classes for static styling.
SVG Kebab-Case Silence	Some SVG attributes like stroke-width may not throw errors but fail to apply styles, resulting in silent visual bugs. React warns about unknown properties but may not crash.	Convert all SVG attributes to camelCase (strokeWidth, fillRule, clipPath). Use an SVG linter to catch these.
Missing key in Lists	When converting HTML lists to JSX arrays, developers often forget the key prop. This causes React to warn about missing keys and can lead to state corruption in list items.	Always provide a unique key prop when mapping arrays to JSX elements. Use stable IDs, not array indices, unless the list is static.
Event Handler String Injection	HTML uses inline event strings like onclick="handleClick()". JSX requires function references. Passing a string causes a runtime error.	Use onClick={handleClick}. Do not invoke the handler in the JSX (e.g., onClick={handleClick()}) unless returning a function.
dangerouslySetInnerHTML Misuse	When converting dynamic HTML content, developers might try to parse it into JSX manually. This is error-prone and insecure.	For dynamic HTML strings, use dangerouslySetInnerHTML={{ __html: htmlString }}. Ensure the content is sanitized to prevent XSS attacks.
Accessibility Attribute Loss	Converting for to htmlFor or tabindex to tabIndex is easy to miss. Missing these breaks keyboard navigation and screen reader support.	Audit all interactive elements for accessibility attributes. Use tabIndex, aria-label, and role in camelCase.

Production Bundle

This section provides actionable tools and configurations to streamline HTML-to-JSX conversion in professional environments.

Action Checklist

• Audit Reserved Keywords: Scan for class, for, checked, selected and replace with className, htmlFor, defaultChecked, defaultValue where appropriate.
• Validate Style Objects: Ensure all style attributes receive objects, not strings. Check for camelCase CSS properties.
• Enforce Self-Closing Tags: Verify all void elements (img, input, br, hr, meta, link) are self-closing.
• Check SVG Properties: Convert SVG attributes to camelCase (strokeWidth, viewBox, fillRule).
• Wrap Root Elements: Ensure components return a single root or use fragments <>...</>.
• Verify Boolean Props: Confirm boolean attributes use expressions ({true}/{false}), not strings.
• Sanitize Dynamic HTML: If using dangerouslySetInnerHTML, ensure content is sanitized via a library like DOMPurify.
• Test Accessibility: Validate that htmlFor, tabIndex, and ARIA attributes are correctly mapped.

Decision Matrix

Scenario	Recommended Approach	Why	Cost Impact
Static HTML Snippet	Manual Refactor	Low overhead; full control over component structure.	Dev time only.
Large Legacy Template	Automated Converter + Lint	Speeds up bulk conversion; linter catches edge cases.	Tool setup time; review overhead.
AI-Generated Code	Linter + Manual Review	AI often outputs HTML; linter enforces JSX compliance.	Review time increases.
Dynamic User Content	dangerouslySetInnerHTML	Parsing HTML to JSX dynamically is complex and risky.	Security audit required.
Performance-Critical UI	CSS Modules / Tailwind	Avoids inline style object recreation; optimizes rendering.	Build config complexity.

Configuration Template

Use ESLint with the React plugin to enforce JSX rules automatically. This configuration catches common conversion errors during development.

// .eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime"
  ],
  "plugins": ["react", "react-hooks"],
  "rules": {
    "react/jsx-boolean-value": ["error", "always"],
    "react/self-closing-comp": ["error"],
    "react/jsx-key": ["error", { "checkFragmentShorthand": true }],
    "react/no-unknown-property": ["error", { "ignore": ["class"] }],
    "react/style-prop-object": ["error"]
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Key Rules:

• react/jsx-boolean-value: Enforces explicit boolean values, preventing the disabled="false" trap.
• react/self-closing-comp: Ensures void elements are self-closing.
• react/style-prop-object: Validates that style props are objects.
• react/no-unknown-property: Catches invalid attributes like class or for.

Quick Start Guide

1. Initialize Linting: Install eslint, eslint-plugin-react, and eslint-plugin-react-hooks. Apply the configuration template above.
2. Paste HTML: Insert your HTML snippet into a .tsx file.
3. Run Linter: Execute npx eslint .. Review errors for attribute mismatches, missing self-closing tags, and style issues.
4. Apply Fixes: Use the ESLint --fix flag for automated corrections where possible. Manually address remaining issues like style objects and SVG properties.
5. Validate Build: Run npm run build to ensure the component compiles without errors. Test accessibility and rendering in the browser.

By adhering to these practices, teams can minimize conversion friction, maintain code quality, and leverage JSX's full capabilities for building robust, accessible user interfaces.