I’m writing a design tool that first parses a piece of html and then re-renders it with a tree of React components like this:

const ArtboardNode = function ({ node }) {
      const elementProps = node.attributes.toJSON();

      const children = node.hasChildren
        ? node.children.map((n) => <ArtboardNode key={n.id} node={n} />)
        : undefined;

      return React.createElement(node.tagName, elementProps, children);
}

Here, node is a custom object already (corresponding to an HTMLElement) that I’m using as an intermediate representation for the document.

This is already working somewhat, but there are some issues:

1. React gives runtime warnings on attribute names that do not match the respective property/React names (class vs className, etc.).
2. React gives a runtime error when a style attribute is present, as it doesn’t like a string for that one. There may be other attributes with such a problem.

Obviously I could now start to hack around these issues, such as manually building a name mapping and add special handing for some special cases such as style.

I’m asking if somebody either knows how to deal with points 1+2 better or has a better approach in general. I also considered not using React for this part at all, but I’d like to have some intermediate state for the editor to work on and the way it’s already set up it would be very easy to implement things like undo operations.