React component to output Raw HTML without using dangerouslySetInnerHTMLOMGWhyAreYouDoingThisPleaseStop

Raw.jsx

import React from 'react';

/**
 * Helper component for injecting raw html into the page.
 */
const rawFactory = type =>
    class RawComponent extends React.Component {
        render() {
            const { children: strings, ...props } = this.props;

            // if there are any spaces inside the JSX tag, they will get passed in as extra children.
            // Join all the children together into one string.
            const __html = strings.join('');

            return React.createElement(type, {
                dangerouslySetInnerHTML: { __html },
                ...props,
            });
        }
    };
                                       
const Raw = new Proxy(
    {},
    {
        get: (target, prop) => {
            if (target[prop] == null) {
                target[prop] = rawFactory(prop);
            }

            return target[prop];
        },
    }
);

export default Raw;