Properly render an example's html output in the Demo HTML tab (#2718)

src-docs/src/services/string/render_to_html.js

@@ -8,13 +8,20 @@ import html from 'html';
 
 configure({ adapter: new EnzymeAdapter() });
 
-export function renderToHtml(componentReference, props = {}) {
+export function renderToHtml(ComponentReference, props = {}) {
   // If there's a failure, just return an empty string. The actual component itself should
   // trip an error boundary in the UI when it fails.
   try {
     // Create the React element, render it and get its HTML, then format it prettily.
-    const element = React.createElement(componentReference, props);
-    const htmlString = render(element).html();
+    // the .html() call below renders the contents of the first node, so wrap everything in a div
+    const element = (
+      <div>
+        <ComponentReference {...props} />
+      </div>
+    );
+    const renderedNodes = render(element);
+
+    const htmlString = renderedNodes.html();
     return html.prettyPrint(htmlString, {
       indent_size: 2,
       unformatted: [], // Expand all tags, including spans