From fed3d9091f9be1b8c1afa4316dd755dd8bade3c6 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Wed, 14 Sep 2022 14:24:13 -0400
Subject: [PATCH] Only pass through children prop if there are children

---
 .changeset/spotty-berries-grow.md                           | 5 +++++
 .../react-component/src/components/CloneElement.jsx         | 6 ++++++
 .../test/fixtures/react-component/src/pages/index.astro     | 2 ++
 packages/astro/test/react-component.test.js                 | 6 ++++++
 packages/integrations/react/server.js                       | 4 +++-
 5 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/spotty-berries-grow.md
 create mode 100644 packages/astro/test/fixtures/react-component/src/components/CloneElement.jsx

diff --git a/.changeset/spotty-berries-grow.md b/.changeset/spotty-berries-grow.md
new file mode 100644
index 000000000000..efb7e9004ce5
--- /dev/null
+++ b/.changeset/spotty-berries-grow.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/react': patch
+---
+
+Only pass through children prop if there are children
diff --git a/packages/astro/test/fixtures/react-component/src/components/CloneElement.jsx b/packages/astro/test/fixtures/react-component/src/components/CloneElement.jsx
new file mode 100644
index 000000000000..809ac4aa43fc
--- /dev/null
+++ b/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>);
diff --git a/packages/astro/test/fixtures/react-component/src/pages/index.astro b/packages/astro/test/fixtures/react-component/src/pages/index.astro
index 049b5fb6aa48..936e98979e5a 100644
--- a/packages/astro/test/fixtures/react-component/src/pages/index.astro
+++ b/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>
diff --git a/packages/astro/test/react-component.test.js b/packages/astro/test/react-component.test.js
index 68624aed642c..e18f7129cc78 100644
--- a/packages/astro/test/react-component.test.js
+++ b/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;
diff --git a/packages/integrations/react/server.js b/packages/integrations/react/server.js
index d73cd0681637..d7aaf7755196 100644
--- a/packages/integrations/react/server.js
+++ b/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) {