fix(react): support void children in experimentalReactChildren (#8455)

1 files changed, 9 insertions, 11 deletions

diff --git a/packages/integrations/react/vnode-children.js b/packages/integrations/react/vnode-children.js
index 9c7abe644..ea5bc0869 100644
--- a/packages/integrations/react/vnode-children.js
+++ b/packages/integrations/react/vnode-children.js
@@ -1,9 +1,12 @@
 import { parse, walkSync, DOCUMENT_NODE, ELEMENT_NODE, TEXT_NODE } from 'ultrahtml';
 import { createElement, Fragment } from 'react';
 
+let ids = 0;
 export default function convert(children) {
 	const nodeMap = new WeakMap();
 	let doc = parse(children.toString().trim());
+	let id = ids++;
+	let key = 0;
 	let root = createElement(Fragment, { children: [] });
 
 	walkSync(doc, (node, parent, index) => {
@@ -12,23 +15,18 @@ export default function convert(children) {
 			nodeMap.set(node, root);
 		} else if (node.type === ELEMENT_NODE) {
 			const { class: className, ...props } = node.attributes;
-			newNode = createElement(node.name, { ...props, className, children: [] });
+			// NOTE: do not manually pass `children`, React handles this internally
+			newNode = createElement(node.name, { ...props, className, key: `${id}-${key++}` });
 			nodeMap.set(node, newNode);
 			if (parent) {
 				const newParent = nodeMap.get(parent);
 				newParent.props.children[index] = newNode;
 			}
 		} else if (node.type === TEXT_NODE) {
-			newNode = node.value.trim();
-			if (newNode.trim()) {
-				if (parent) {
-					const newParent = nodeMap.get(parent);
-					if (parent.children.length === 1) {
-						newParent.props.children[0] = newNode;
-					} else {
-						newParent.props.children[index] = newNode;
-					}
-				}
+			newNode = node.value;
+			if (newNode.trim() && parent) {
+				const newParent = nodeMap.get(parent);
+				newParent.props.children[index] = newNode;
 			}
 		}
 	});