Only pass through children prop if there are children (#4756)

.changeset/spotty-berries-grow.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/react': patch
+---
+
+Only pass through children prop if there are children

packages/astro/test/fixtures/react-component/src/components/CloneElement.jsx

@@ -0,0 +1,6 @@
+import { cloneElement } from 'react';
+
+const ClonedWithProps = (element) => (props) =>
+  cloneElement(element, props);
+
+export default ClonedWithProps(<div id="cloned">Cloned With Props</div>);

packages/astro/test/fixtures/react-component/src/pages/index.astro

@@ -6,6 +6,7 @@ import PropsSpread from '../components/PropsSpread.jsx';
 import {Research2} from '../components/Research.jsx';
 import Pure from '../components/Pure.jsx';
 import TypeScriptComponent from '../components/TypeScriptComponent';
+import CloneElement from '../components/CloneElement';
 
 const someProps = {
   text: 'Hello world!',
@@ -29,5 +30,6 @@ const someProps = {
     <Research2 client:idle />
     <TypeScriptComponent client:load />
     <Pure />
+		<CloneElement />
   </body>
 </html>

packages/astro/test/react-component.test.js

@@ -83,6 +83,12 @@ describe('React Components', () => {
 			expect($('#client #lazy')).to.have.lengthOf(1);
 			expect($('#server #lazy')).to.have.lengthOf(1);
 		});
+
+		it('Can pass through props with cloneElement', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerioLoad(html);
+			expect($('#cloned').text()).to.equal('Cloned With Props');
+		});
 	});
 
 	if (isWindows) return;

packages/integrations/react/server.js

@@ -68,8 +68,10 @@ async function renderToStaticMarkup(Component, props, { default: children, ...sl
 	const newProps = {
 		...props,
 		...slots,
-		children: children != null ? React.createElement(StaticHtml, { value: children }) : undefined,
 	};
+	if(children != null) {
+		newProps.children = React.createElement(StaticHtml, { value: children });
+	}
 	const vnode = React.createElement(Component, newProps);
 	let html;
 	if (metadata && metadata.hydrate) {