HTML to JSX Converter

The conversion handles syntax, not semantics. Event handler strings need real functions, repeated markup usually wants a map over data, and hardcoded text often belongs in props. Treat the output as a correct starting point rather than a finished component.

JSX looks like HTML but is JavaScript, so it inherits JavaScript reserved words and DOM property naming. class and for are reserved, hyphenated attributes are invalid identifiers, style expects an object rather than a string, and every element must be explicitly closed.

class becomes className, for becomes htmlFor, hyphenated attributes such as tabindex are camelCased to tabIndex, inline style strings become style objects with camelCased properties, void elements like <img> and <br> are self-closed, and HTML comments become JSX comment expressions.

No, and they should not be. React passes both families through to the DOM unchanged, so data-testid and aria-label keep their hyphens exactly as written.

An onclick attribute containing a string of JavaScript becomes onClick, but the value is still a string and React expects a function. You will need to replace it with a real handler by hand — that part cannot be done mechanically.

Almost. Wrap it in a return and make sure there is a single root element, adding a fragment if the markup has several siblings at the top level.